es5建構函式，es6類和類的繼承

li_jing發表於2019-02-25
函式繼承

原型鏈，es5 建構函式

1）（每個類都是函式資料型別的）每個函式都會自帶一個屬性prototype(原型)，並且這個屬性的值是一個物件資料型別的，瀏覽器為其開闢了一個堆記憶體,這個堆記憶體中存放的就是所有公有的屬性和方法
2）在函式的prototype屬性的堆記憶體中，瀏覽器為其增加了一個屬性constructor,指向當前函式本身
3)（例項和函式的prototype也是物件資料型別的） 每一個物件資料型別也有一個自帶的屬性__proto__,指向當前所屬類的原型

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中的繼承會繼承例項、原型和靜態方法

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('小貓');
複製程式碼

相關文章