【js】《JavaScript设计模式与开发实践》——this的指向

在js中，this总是指向一个对象，具体要看那个对象在运行时函数的执行环境（动态绑定），即“函数在谁那被调用，this就指向谁”。

1、在对象的方法内调用——指向该对象

例如

var obj = {
    name: '小阔爱',
    getName: function () {
        console.log('this === obj?', this === obj);
        console.log('this.name=', this.name);
    }
};
obj.getName(); // '小阔爱'

2、在普通方法内调用——指向全局对象window

例如

window.name = '小阔爱';
var getName = function () {
    return this.name;
};
console.log('getName=', getName()); // 小阔爱

或者

window.name = '小阔爱';
var obj = {
    name: '宝批龙',
    getName: function () {
        return this.name;
    }
};
var getName = obj.getName;
console.log('getName=', getName()); // 小阔爱

或者——当函数里面嵌套函数时，指向window

window.id = 'xiaokuoai';
document.getElementById('baopilong').onclick = function () {
    console.log('this.id=', this.id); // 'baopilong'
    var newFun = function () {
        console.log('this.id=', this.id); // 'xiaokuoai'
    }
    newFun();
};

注意：在ES5的strict模式下，普通函数内的this被规定为不会指向window，而是undefined

例如

function func () {
    'user strict'
    console.log('this=', this); // undefined
}
func()

3、构造器调用（被new运算符调用）

当函数被new运算符调用时，该函数总会返回一个对象。

例如（一般情况）

var obj = function () {
    this.name = '小阔爱';
};
var newObj = new obj();
console.log('newObj.name=', newObj.name); // '小阔爱'

特殊情况：(函数有返回值的情况)
如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。（区分构造器是否显式地返回一个object类型的对象）

例如（不显式返回object对象）

var obj = function () {
    this.name = '小阔爱';
    return '宝批龙';
};
var newObj = new obj();
console.log('newObj.name=', newObj.name); // '小阔爱'

以及（显式返回object对象）

var obj = function () {
    this.name = '小阔爱';
    return {
        name: '宝批龙'
    };
};
var newObj = new obj();
console.log('newObj.name=', newObj.name); // '宝批龙'

4、call或apply调用

跟普通函数相比，这种方式可以动态改变传入函数的this

例如

var obj1 = {
    name: '小阔爱',
    getName: function () {
        return this.name;
    }
};
var obj2 = {
    name: '宝批龙'
};
console.log('obj1.getName=', obj1.getName()); // '小阔爱'
console.log('obj1.getName.call(obj2)=', obj1.getName.call(obj2)); // '宝批龙'