构建函数中的this指向

构建函数中的this指向

构造函数中的this指向是这个构造函数本身 但也并不是这个构造函数的内部空间 其实这一点 有一些难以理解。

传统函数 构建 构造函数

function Person(name, age) {  
    this.name = name;  
    this.sayHello = function() {  
        console.log(
            `
             this.name：${this.name},
             this.age: ${this.age},
             name：${name},
             age：${age},
             `
        );  
    };  
}  
var john = new Person("John", 30);  
john.sayHello();

从这个图可以看出来 ，直接使用 name 和 age 是访问 构造函数的内部空间 可以访问的 ，但是 this.age 是访问不到内部空间的 。

可以发现 这个 this 是新开辟的一个指向 本身构造函数的空间，并不是指向windows的。

function Person(name, age) {  
    this.name = name;  
    this.sayHello = function() {  
        console.log(
            `
             this.name：${this.name},
             this.age: ${this.age},
             name：${name},
             age：${age},
             this：${JSON.stringify(this)},
            `
        );  
    };  
}  
var john = new Person("John", 30);  
john.sayHello();

class 语法糖构建 构造函数

使用class 语法糖 的构造函数 的this 指向 就是 构造函数 的内部空间 。

class MyClass {  
    name = '张三'
    age = "18"
    fun() {  
        console.log(`
            this.name:${this.name}
            this.age:${this.age}
        `)
    }
}
let a = new MyClass()
a.fun()