New关键字,new的时候发生了什么、构造函数的this问题简单叙述、调用构造函数时的原理、this指向都简单叙述了一下,注释很重要认真看!

195 阅读1分钟

New关键字

//创建一个CreateCat 构造函数 构造函数的首字母需要大写(不是必须的,应用于编程规范)
  function CreateCat(name) {
     this.name = name
  }
  const cA = new CreateCat("!!!🐱!!!")*
  console.log(cA.name)

​ 当new的时候发生了什么?

1.创建一个空对象*

2.将构造函数的propotype(显式原型)属性赋值给新对象的__protot__(隐式原型)属性*

3.将构造函数的this指向这个新对象*

4.执行构造函数的代码*

5.将新对象返回
  //实践
  var catB = (function () {
   // 1.创建一个新对象*
   var newObj = {}

   //2.将构造函数的propotype(显式原型)属性赋值给新对象的__proto__(隐式原型)属性*
   newObj.__proto__ = CreateCat.prototype

   // 3.将构造函数的this指向这个新对象 并且 4.执行构造函数的代码 调用call会自执行此行代码*
   CreateCat.call(newObj, "***🐱***")

   // 5.将新对象返回*
   return newObj
  })()
    console.log(catB.name)

构造函数的this指向

//构造函数
  function CreateCat(name) {

   /* 
  	   这里的this指向CreateCat() 必须要在new关键字的情况下才是指向本身的 new CreateCat("猫咪")
       console.log(this) //CreateCat {}
   */

   /* 
        要是这样调用 例子:
        const cc = CreateCat("fish")*
        此时 这是的this指向的是*
        console.log(this) Window{} 
    */

   this.name = name
  }

  CreateCat.prototype.eat = function (something) {
   //prototype中的this指向的是 CreateCat构造函数
   //这里的this指向的是CreateCat 所以这里可以使用this.name
   console.log(`${this.name} likes ${something}`) //print: 猫咪 likes fish
  }

    /*	
        这是的cc是CreateCat返回的一个 实例(cc)通用叫法 
        此时的cc就可以理解为CreateCat的里面的this(是可以理解成this哦 不是真的是this)
        所以可以调用CreateCat原型上的eat函数
    */
    
  const cc = new CreateCat("猫咪") //这里的参数传递给CreateCat的参数name
  cc.eat("fish") //这里的参数传递给CreateCat.prototype.eat的参数something

!( this永远指向最后调用它的那个对象 )!

!!复习的时候做的笔记,我有理解错的请指教!!