this指向的四种情况

this的指向问题:
1.作为对象的函数被调用(this指向该对象)
2.作为普通函数被调用(此时this指向全局对象,在浏览器的JavaScript中,全局对象是window)
3.构造函数调用
4.Function.prototype.call 和 Function.prototype.apply 调用 (与普通的函数调用相比,可以动态的改变传入函数的this)

1.作为对象函数被调用(this指向该对象

let obj = {
    name:'jack',
    getName:function(){
        console.log(this===obj); // true
        console.log(this.name); // 'jack'
    }
}
obj.getName()

2.作为普通函数被调用

注释:函数不作为对象的属性被调用时,此时就是普通的函数方式,this是指向全局对象,在浏览器中JavaScript全局对象是window

window.name = 'rousi'
let getName = function(){
    return this.name
}
console.log(getName()); // rousi
// 或者
window.name = 'amao'
let myObject = {
    name :"seven",
    getName:function(){
        return this.name
    }
}
let getName1 = myObject.getName  // 此时myObject.geName 是作为普通函数被调用,所以此时的this指向的是window
console.log(getName1());  // amao

3.构造函数调用

注释:JavaScript 中没有类,但是可通过构造器创建对象,提供了new运算符,让构造器看起来像一个类,构造器外表和普通函数一毛一样,区别在于被调用,使用new运算符调用函数时,函数总会返回一个对象,构造器里的this就指向这个返回的对象,代码如下:

let MyClass = function(){
    this.name = 'dingdamao'
}
let obj = new MyClass()
console.log(obj.name); // dingdamao

注意: 用new调用构造函数的时候,需注意一个问题,如果构造器返回了一个object类型的对象,最终的运算结果会返回这个对象,不是以上说的this,代码如下:

let MyClass = function(){
    this.name = 'dingdamao' // 此时this指向还是指向Myclass这个函数
    return {
        name:'lilaoer' // 返回的是这个对象
    }
}
let obj = new MyClass()
console.log(obj.name); // lilaoer

如果构造函数不显式的返回任何数据,或者返回的是一个非对象的数据,就不会造成上述问题

let MyClass = function(){
    this.name = 'zhangsan'
    return 'name' // 此处如果返回的是对象{}  下面obj.name 就是undefined
}
let obj = new MyClass()
console.log(obj.name); // zhangsan

4.Function.prototype.call()和Function.prototype.apply()调用

注释:与普通函数相比,call()和apply()可以动态的改变传入的this

let obj1 = {
    name : 'dijia',
    sayName:function(){
        return this.name
    }
}
let obj2 = {
    name:'leiou'
}
console.log(obj1.sayName()); // dijia
console.log(obj1.sayName.call(obj2)); // leiou

本文摘自JavaScript设计模式与开发实践,如有侵权,请联系本人删除