通过new一个函数得到的实例到底是什么?
众所周知:
function User() {
const a = 1
const b = 2
}
const user1 = new User()
console.log('user1:', user1.a) //打印不出a的值
为什么呢?因为a是定义在函数User内的一个变量,它的作用域仅限于在User内,通过new User()得到的实例无法拿到这个属性
那么把User作为构造函数实例化得到的user1是什么呢?
事实情况是:
当一个普通函数被当作构造函数时,它会创造出一个this空对象,并且如果你这个普通函数没有返回值(return xxx)的话,它会默认将这个this返回,即得到的user1就是这个this
那要是这个函数如果有返回值呢?
各情况如下:
1.这个函数没有返回值:
如上面所说,此时它会对user1 return一个this,这个this是什么都没有的{}(不算一些原型方法),所以,你如果想通过user1读取到User中a,b的数据,就要:
function User() {
this.a = 1
this.b = 2
}
const user1 = new User()
console.log('user1:', user1.b) //打印出user1: 2
把这些数据都加在this中。
并且为了验证得到的user1确实是User中创建并返回的this,可以试:
let saveThis = null
function User() {
saveThis = this
}
const user1 = new User()
console.log(user1 === saveThis)
结果将打印为true
2.这个函数有返回值
返回值是个简单数据类型:
function User() {
this.a = 1
this.b = 2
return 1
}
const user1 = new User()
console.log('user1:', user1.b) //打印出user1: 2
这种情况下,简单数据类型的返回值会被忽略,依旧返回this
返回值是个引用数据类型:
function User() {
this.a = 1
this.b = 2
return {
c:3,
d:4
}
}
const user1 = new User()
console.log('user1:', user1.b) //获取不到b
console.log('user1:', user1.d) //打印user1: 4
也就是说,此时的显式返回结果会将this覆盖
并且此时user1.__proto__将不再指向User()的原型,即:
console.log(user1.__proto__ === User.prototype) //打印false

浙公网安备 33010602011771号