构造函数和this

这方面最直接的例题为:

function Foo() {
    this.bar = "Lucas"
}
const instance = new Foo()
console.log(instance.bar)

答案将会输出 Lucas。但是这样的场景往往伴随着下一个问题:new 操作符调用构造函数,具体做了什么?以下理解仅供参考

  • 创建一个新的对象
  • 将构造函数的this指向这个新对象
  • 为这个对象添加属性、方法等
  • 最终返回新对象  

以上过程,也可以用代码表述:

var obj  = {}
obj.__proto__ = Foo.prototype
Foo.call(obj)

当然,这里对 new 的模拟是一个简单基本版的。

需要指出的是,如果在构造函数中出现了显式 return 的情况,那么需要注意分为两种场景:

function Foo(){
  this.user = 'Lucas'
  const o = {}
  return o      
}

const instance = new Foo()
console.log(instance.user)

将会输出 undefined,此时 instance 是返回的空对象 。

接下来看

function Foo(){
    this.user = "Lucas"
    return 1
}
const instance = new Foo()
console.log(instance.user)

将会输出 Lucas,也就是说此时 instance 是返回的目标对象实例 this。

结论:如果构造函数中显示返回一个值,且返回的是一个对象,那么this就指向这个返回的对象;如果返回的不是一个对象,那么this仍然指向实例  

  

  

  

  

 

posted @ 2021-02-25 13:46  冲鸭fighting  阅读(133)  评论(0)    收藏  举报