JS之理解原型和原型链

原型与原型链

一.在了解原型以前须要提早了解的。

• 1.工厂模式：建立一个函数，用特定的接口建立对象的细节。

  //如今要建立两个包含 “name”和“age”的对象，
  let tom ={name:"Tom",age:16}
  let lily = { name ： "Lily",age：18}
  ……//所示数量足够具大 ，对象足够大 ，会花费大量的时间。下面的工厂模式能 很好的解决这一问题

  //工厂的就是只流水线不是全部都是要人工，节约人力成本。
    function person(name,age){
        let  obj = {}; //建立一个对象 ；
        obj.name = name ; //为对象添加细节
        obj.age = age ;
        obg.sayHello= function (){
          alert ("Hello"+this.name)
        };
        return obj;} //返回这个对象 
    let tom = person("Tom",16);
    let lily = person("Lily",18)

  • 工厂函数的优点：避免的大量的重复代码；
  • 工厂函数的劣势：其建立的对象不能标志为一种特定的类型，没有解决对象识别的问题，不知道对象的类型。构造函数能很好的解决这个问题。

• 2.构造函数：自定义构造函数，能够自定义对象类型的属性和方法。

  function Person(name,age){   
        this.name = name ; //为对象添加细节
        this.age = age ;
        this.sayHello= function (){
          alert ("Hello"+this.name)
        };
    let tom = new Person("Tom",16);
    let lily =new Person("Lily",18)

  • new的过程作了三件事①建立了一个对象；②将this指向这个对象；③返回这个对象；
  • 两个实例对象都有一个属性constructor(构造函数)，指向Person；这就是能够经过constructor判断对象类型的原理。
  • 存在的问题：构造函数的每一个方法都要在实例上从新建立一遍，虽然函数名是同样的，可是不相等的。

---

二.原型模式

• 1.以下，与构造函数模式不一样的是，原型模式的每一个实例都是访问同一属性同一函数，，函数不用从新建立。

  function Person () {
     this.x = 100;
  }
  Person.prototype.name = 'Tom';
  Person.prototype.age = 18;
  Person.prototype.sayHello =  function (){
    alert(`Hello${this.name}`)
  }
  let Tom = new Person（）
  Tom.sayHello()

• 2.原型对象

  • ①每一个函数数据类型（普通函数，类）上，都有一个属性，叫prototype,是一个对象，这个函数指向函数的原型对象；
  • ②prototype这个对象上，自带一个属性，constructor指向当前这个类；

  • ③当为实例添加属性时，这个属性会屏蔽原型对象中保存的同名属性，可是事实阻止访问，并无修改那个属性，若将同名的实例属性设置为null，一样会屏蔽，可是若用delete，则能够删除实例属性，能够从新访问原型中的属性。

    alert(Tom.age);  //18
    let Tom.age = 20;
    alert(Tom.age); //20
    delete Tom.age;
    alert(Tom.age); //18

    

  • ④属性分为两种，来自实例（或者是构造函数）或是原型，原型上的属性和方法都是共有的，构造函数中的属性方法都是私有的，构造函数中的this都是实例。为何私有属性（来自实例的属性）的查找等级要高呢？这就涉及到原型链。

• 3.原型链:每一个对象数据类型（普通对象，prototype，实例）都有一个属性，叫作__proto__；

  • 好比咱们console.log（Tom.age）的查找过程是怎样的呢？①首先在私有空间内查找age属性，私有空间的属性包括自身的属性和从类那里继承的属性，
  • ②找不到的话：经过__proto__去当前实例所属类的原型上进行查找，找到的话，说明是共有属性；
  • ③还找不到的话：继续经过__proto__去当前实例所属类的原型进行查找，找不到将继续经过__proto__一直找到Object。
    
  • ④曲线①表明Person的原型对象；曲线②中，实例Tom经过__proto__指向Tom所属类（Person）的原型（Person Prototype）；曲线③中，Person的原型对象经过__proto__找到Person对象的所属类，也就是Object(函数也是对象类，万物皆对象)，指向它的原型（ObjectPrototype） ；曲线5中，指向Obeject所属类的原型，它的类就是它本身，因此此时不在有__proto__整个属性查找结束，这就是原型链的查找过程。
    

  • ⑤经过hasOwnProperty来判断属性，这个方法就是经过④中的查找过程，在基类Object中找到的。 判断属性是否在对象上“name” in Tom，其中in的查找过程也是经过上述的查找过程。

    function hasPrototypeProperty(object,attr){
       return !object.hasOwnProperty(attr) && (attr in object);}

• 4.关于原型须要注意的几点

  • ①使用简单原型语法的时候，注意constructor的指向问题，

    Person.prototype={  //此时constructor指向Object构造函数
       name : 'Tom',
       age:18
    }
    Person.prototype={  //此时constructor指向Person
       constructor:Person,
       name : 'Tom',
       age:18
    }

  • ②添加和修改原型的属性和方法都能当即在全部对象实例中反应出来（即便先建立实例后修改原型）；可是若是重写整个原型对象，建立在前的实例并不能得到重写后的属性或方法。这是由于重写原型以后是新生成原型对象，和声明在前的任何已经存在的实例都没有关系。