es5構造函數,es6類和類的繼承

原型鏈,es5 構造函數

1)(每一個類都是函數數據類型的)每一個函數都會自帶一個屬性prototype(原型),而且這個屬性的值是一個對象數據類型的,瀏覽器爲其開闢了一個堆內存,這個堆內存中存放的就是全部公有的屬性和方法
2)在函數的prototype屬性的堆內存中,瀏覽器爲其增長了一個屬性constructor,指向當前函數自己
3)(實例和函數的prototype也是對象數據類型的) 每個對象數據類型也有一個自帶的屬性__proto__,指向當前所屬類的原型es6

function Animal(name){
    this.name=name;
}
//公有屬性
Animal.prototype.info={time:'100'}
let animal1=new Animal('哺乳類');
let animal2=new Animal('哺乳類');
console.log(animal1.__proto__==Animal.prototype);
console.log(animal1.__proto__.construtor==Animal);
console.log(Animal.prototype.__proto__==Object.prototype);
console.log(Object.prototype.__proto);//null
複製代碼

es5類的繼承

1)繼承實例上的屬性 2)繼承公共屬性 3)繼承公有和私有屬性瀏覽器

function Animal(name){
    this.name=name;
}
Animal.prototype.info={time:'100'}
function Cat(name){
    Animal.call(this,name)//1)繼承實例上的屬性
}
2)繼承公共的屬性
Cat.prototype.__proto__=Animal.prototype;//原型鏈繼承
原理:若是Cat原型上沒有,則會經過__proto__指向Animal.prototype,則會找到animal公共屬性。而且若是Cat原型上修改的話也不會影響Animal的原型
Object.setPrototypeOf(Cat.prototype, Animal.prototype);//es6把上面的方法進行了改寫,也是繼承公共屬性
let cat=new Cat('小花花');
console.log(cat.info);
console.log(cat.name);
複製代碼
Cat.prototype=Object.create(Animal.prototype,{constructor:{value:Cat}})//繼承公共屬性
//Object.create的原理:
function create(parentPrototype) {
   function Fn() {} // 建立一個空類
   Fn.prototype = parentPrototype; 
   return new Fn(); // 建立的實例則只有父類公共方法
 }
複製代碼
3)繼承公有和私有屬性
call+原型繼承
複製代碼
4)不推薦->父(私有+公有) 變爲 子(公有)

 function A(val) {
        this.x = 100;
        this.xy=val
    }
    A.prototype.getX = function () {
        console.log(this.x);
    };

    function B() {
        this.y = 200;
    }
    //想讓B做爲子類,繼承A這個父類中的私有的/公有的屬性和方法
    B.prototype = new A;

    var b = new B("nihao");
    b.getX();
    console.log(b.xy);//undefined 缺點:不能傳參給父類
複製代碼

es6繼承

es6中的繼承會繼承實例、原型和靜態方法bash

class Animal{ // es6只支持靜態的方法,並不支持靜態屬性 Animal.a = 1; es7支持
   static a(){
       return 1;
   }
    constructor(val){
      this.name=val;
      this.age=9;
    }
    eat(){
        console.log('吃飯');
    }
}
let animal=new Animal('動物');

class Cat extends Animal{
//不傳參的話能夠不寫constructor
    constructor(name){//用constructor則必須使用super
        super(name)
    }
   //super雖然表明了父類Animal的構造函數,可是返回的是子類Cat的實例
}
let cat=new Cat('小貓');
複製代碼
相關文章
相關標籤/搜索