搞定 this 的值

这篇文章将从函数调用和this记忆表格两个角度搞定this的值

方法一： call函数调用法

call() 方法使用一个指定的 this 值和单独指定的一个或多个参数来调用一个函数，也就是说任何的函数都可以改写成 .call() 的方式调用，把所有函数都用call 调用，this 显而易见

foo(a,b)
/*上下两种方式等价*/
foo.call(undefined, a, b)

上面小例中，指定 this 是 undefined，按道理这时的 this 应该是 undefined，但是浏览器里有一条规则：

指定的 this 是 null 或 undefined，那么 window 对象就是默认的 this（严格模式下默认是 undefined）

var obj = {
  foo: function(){
    console.log(this)
  }
}
obj.foo()
/*上下两种方式等价*/
obj.foo.call(obj)

此时的 this 就是 obj

[ ] 语法

function fn (){ console.log(this) }
var arr = [fn, fn2]
arr[0]()

我们可以把 arr[0]() 假想为 arr.0() ，这样转换为 arr.0.call(arr)，this 就是 arr

方法二：this 记忆表

• this => window/global
• 立即执行函数 => window/global
• obj.fn() this => obj
• fn.call(xxx) this => xxx
• fn.apply(xxx) this => xxx
• fn.bind(xxx) this => xxx
• new Fn() this => 实例（构造的对象）
• fn = ()=> {} this => 外面的 this
  箭头函数的this是它外面函数的this

练一练

var a = {
name:"里面的name", 
sayName:function(){
    console.log("this.name = " + this.name);
  }
};
var name = "外面的name"; 
function sayName(){
var sss = a.sayName;
sss(); 
a.sayName(); 
(a.sayName)(); 
(b = a.sayName)();
} 
sayName();

外面的name 里面的name 里面的name 外面的name

var name = "Ryan"
var object = {
    name: "My Object",
 
    getNameFunc: function () {
        let that = this;
        let you = "hello";
        console.log("getNameFunc this = ",this); //作为object的函数，这里的this指向object
 
        (function second() {
            // 能访问上一级的变量
            console.log("second  this = ",this); 
            console.log("second this.name = ", this.name);
            console.log("second that.name = ", that.name); 
 
            (function third(){
                console.log("third you = ",you);
            })();
 
        })();
 
        return function () {
            return that.name; 
        };
 
    }
 
};
 
(function globalFunc(){
    console.log("globalFunc this = ",this);
})();
console.log(object.getNameFunc()());

globalFunc this = Window {0: global, window: Window, self: Window, document: document, name: "zzzz", location: Location, …}

getNameFunc this = {name: "My Object", getNameFunc: ƒ}
second this = Window {0: global, window: Window, self: Window, document: document, name: "Ryan", location: Location, …}
second this.name = Ryan
second that.name = My Object
third you = hello
My Object

var length = 10;
function fn() {
  console.log(this.length)
}
var obj = {
  length = 5,
  method: function(fn) {
    fn()
    arguments[0]()
  } 
}
obj.method(fn,1)

10 2