《JavaScript设计模式与开发实践》阅读笔记 二

著作权归该书作者所有。本读书笔记仅供个人记录学习使用，如若侵权，请通知到我，我将立即删除全部内容。

this、call和apply

JavaScript的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的。
除去不常用的with和eval的情况，this的指向大致分4种

  1. 作为对象的方法调用
  2. 作为普通函数调用
  3. 构造器调用
  4. Function.prototype.call或Function.prototype.apply调用

1.当函数作为对象的方法调用，this指向该对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
    a : 1,
    get : function(){
        console.log(this);
        console.log(this === obj)
        console.log(this.a)
    }
}

obj.get()
//Object {a: 1, get: function}
//true
//1

2.当函数作为普通函数被调用，不作为对象的属性被调用，此时this指向全局对象，即window对象

1
2
3
4
5
6
7
8
window.name = "globalName";

var getName = {
    return this.name
}

console.log(getName());
//globalName

3.构造器调用
大部分JavaScript函数都可以当做构造器使用，构造器的外表和普通函数一样，区别在于被调用的方式。当用new运算符调用函数时，该函数总会返回一个对象，通常情况下构造器里的this就指向返回的这个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var MyClass = functio(){
    this.name = "Bob";
}

var obj = new MyClss()
console.log(obj.name)
//Bob

//如果构造器显式返回一个object类型的对象，此次运算结果最终会返回这个对象，而不是之前期待的那样
var MyClass = function(){
    this.name ="Bob";
    return{
        //显式返回一个对象
        name : "anne"
    }
}
var obj = new MyClass()
console.log(obj)
//Object {name: "anne"}
console.log(obj.name)
//anne

//如果构造器返回一个非对象类型的数据，就不会出现问题。this指向返回的对象。
var MyClass = function(){
    this.name = "Bob"
    return "anne"
}

var obj =new MyClass();
console.log(obj)
//MyClass {name: "Bob"}
console.log(obj.name)
//Bob

4.Function.prototype.call 或 Function.prototype.apply

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

fun.call(thisArg[, arg1[, arg2[, ...]]])
参数
thisArg
在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, ...
指定的参数列表。
返回值
返回结果包括指定的this值和参数。
描述
可以让call()中的对象调用当前对象所拥有的function。你可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态地改变传入函数的this

var obj = {
    name : "jay",
    getName : function(){
        return this.name;
    }
}

var obj2 ={
    name : "anne"
}

console.log(obj.getName());
//jay
console.log(obj.getName.call(obj2))
//anne



//丢失的this，这是一个常见问题
var obj ={
    myName : "Bob",
    getName : function(){
        return this.myName;
    }
}

console.log(obj.getName());  //此时,getName作为对象的方法被调用，this指向该对象也就是obj，输出"Bob"
//当调用obj.getName时，getName方法是作为obj对象的属性被调用的，此时this指向obj对象，所以obj.getName()输出"Bob"

var getName2 = obj.getName;

//当另外一个变量getName2引用obj.getName，并且调用getName2时，此时是普通函数调用方式，this指向全局window，所以输出undefined

console.log(getName2);  //function (){return this.myName;}
console.log(getName2());    //undefined

call与apply的区别

在ECMAScript3中给Function的原型定义了两个方法，Function.prototype.call 和Function.prototype.apply，作用相同，仅仅是传入参数形式不同。
apply接受两个参数，第一个参数指定了函数体内this对象的指向，第二个参数为一个带下标的集合，这个集合可以是数组，也可以是类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数：
当使用call或apply的时候，如果传入的第一个参数为null，函数体内的this会指向默认的宿主对象，即window

var func = function(a,b,c){
    console.log([a,b,c]);
}

func.apply(null,[1,2,3]);    //[1,2,3]

有时使用call或apply的目的不在于指定this，而是借用其他对象的方法，那我们可以传入null来替代某个具体对象
Math.max.apply(null,[1,2,5,3,4]); //5

call和apply的用途

1.改变this的指向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var obj1 ={
    name : "anne"
}

var obj2 ={
    name : "Bob"
}

window.name = "jack"

var getName = function(){
    console.log(this.name)
}
getName() //函数作为普通函数被调用,this指向全局window 输出 "jack"
getName.call(obj1)  //"anne"
//当执行getName.call(obj1) getName函数体内的this指向obj1对象
getName.call(obj2)  //"Bob"
  • this被不经意改变的场景：比如有一个div节点，div节点的onclick事件中的this本来指向该div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.getElementById("div1").onclick = function(){
    console.log(this.id);   //输出div1
}
假如该事件函数中有一个内部函数func，在事件内部调用func函数时，func函数体内的this就指向window，而不是我们预期的div

document.getElementById("div1").onclick = function(){
    console.log(this.id);   //输出div1
    var func = function(){
        console.log(this.id)    //输出undefined
    }
    func()
}

这时候使用call来修正func函数内的this
document.getElementById("div1").onclick = function(){
    var func = function(){
        console.log(this.id)    //输出undefined
    }
    func.call(this)
}

2.Function.prototype.bind 用来指定函数内部的this指向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Function.prototype.bind = function(context){
   var self = this;  //保存原函数
   return function(){  //返回一个新函数
      return self.apply(context , arguments);//执行新函数的时候，会把之前传入的context当作新函数体内的this
   }
}
var obj ={
  name : "jay"
}
var func = function(){
  console.log(this.name);
}.bind(obj);
func()
//jay

通过Function.prototype.bind来"包装"func函数，并且传入一个对象context当作参数，这个context对象就是我们想修正的this对象

在Function.prototype.bind内部，我们先把func函数的引用保存起来，然后返回一个新函数，在将来执行func函数时，实际上先执行的是刚返回的新函数，在新函数内部，self.apply(context,arguments)这句代码才是执行原来的func函数，并且指定context对象为func函数体内的this

3.借用其他对象的方法

一、借用构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var A = function(name){
   this.name = name;
}

var B = function(){
  A.apply(this,arguments);
}

B.prototype.getName = function(){
  return this.name;
}

var b = new B("jay")
console.log(b.getName())
//jay

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码