【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)); // '宝批龙'
    原文作者:设计模式
    原文地址: https://segmentfault.com/a/1190000014674001
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞