通过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

posted @ 2025-08-08 22:46  wenerda  阅读(5)  评论(0)    收藏  举报