2019-09-18 javascript中如何判断this的指向问题

首先this并不会指向函数本身。

1. 当函数在没有任何修饰的情况下调用,非严格模式下,this指向window,严格模式下this指向undefined。(默认绑定)

2. 当函数由一个对象引导调用时,this指向该对象。(隐式绑定)

3. 函数通过apply,call,bind绑定时,this指向绑定的对象。(显式绑定)
4. 当函数被当做构造函数使用,又new引导调用时,this指向new创建出来的对象。(new绑定);
5. 箭头函数其this取决于函数定义时所在的上下文。

其优先级为:new绑定 > 显示绑定 > 隐式绑定 > 默认绑定;

1. 当函数在没有任何修饰的情况下调用,非严格模式下,this指向window,严格模式下this指向undefined。(默认绑定)

(1)非严格模式
console.log(this); // window
(2) 严格模式(当使用了'use strict'后,成为严格模式,此时this是undefined。)
'use strict';
console.log(this);// undefined

2.当函数由一个对象引导调用时,this指向该对象。(隐式绑定)

function test () {
    console.log(this); // testObj
}
var testObj = {
    name: 'test',
    func: test
};
testObj.func();

3.函数通过apply,call,bind绑定时,this指向绑定的对象。(显式绑定)

function test (name) {
    console.log(name + ':' + JSON.stringify(this));
}
var testObj = {
    name: 'test'
};
test.bind(testObj)('bind'); // bind:{"name":"test"}
test.call(testObj, 'call'); // call:{"name":"test"}
test.apply(testObj, ['apply']); // apply:{"name":"test"}

4.当函数被当做构造函数使用,又new引导调用时,this指向new创建出来的对象。(new绑定);

function Test (name) {
    this.name = name;
}
var ts = new Test('haha');
//此时Test方法中的this指向`ts`,因此可以使用ts.name获取到`name`值;
console.log(ts.name); // haha

但是当构造函数中有返回对象或者函数时,this指向new创建出来的对象的返回值;
下面代码中ts.name123,而非this.name中设置的haha
关于new关键字的原理可见:http://www.netyali.cn/article/detail/101.html

function Test (name) {
    // 此时下面`this.name = name;`也会执行,但是不会起作用;
    this.name = name;
    return {
        name: '123'
    };
}
var ts = new Test('haha');
console.log(ts.name);// 123

5.箭头函数其this取决于函数定义时所在的上下文。

function Test () {
    this.func = function () {
        console.log(this); // Test
        return () => {
            console.log(this); // Test
        };
    };
    this.func1 = function () {
        console.log(this);// Test
        return function () {
            console.log(this);// Window
        };
    };
}
var ts = new Test('haha');
// Test 构造函数下的func 和 func1都返回一个function,
// 并将整个function赋值给新的变量`func`和`func1`,
// 此时func和func1如果是在全局作用域下,其实是window.func和window.func1
// 通过window.func和window.func1调用方法,理论上方法中的this应该指向的是window
// 但是箭头函数自身没有this,指向的只能是代码块所在的父级作用域,因此指向的是Test构造函数中的func。
var func = ts.func();
var func1 = ts.func1();
window.func();
window.func1();

参考:

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

  • https://github.com/YvetteLau/Step-By-Step/issues/1

你可能感兴趣的:(2019-09-18 javascript中如何判断this的指向问题)