關於 JavaScript 原型和繼承的思考

閉包和原型

prototype

• 工廠函數

function user(name){
    var newUser = {};
    newUser.name = name;
    return newUser;
}
複製代碼

• 構造函數

//使用new的是 構造函數
function User(name,age,gender){
    this.name = name ; 
    this.age = age ;
    this.gender = gender ;
}

var whh = new User('whh',16,'male');
//生成對象的過程叫作實例化
console.log('whh:',whh)
複製代碼

• 理解 prototype 和 _proto_

function User(name,age,gender){
    this.name = name ; 
    this.age = age ;
    this.gender = gender ;
    this.eat = function(){
      console.log('miao')  
    } ;
    this.greeting = function(){
        console.log('yo! my name is '+this.name)
    }
}

//每次須要實例化，每一個新的new 都是不一樣的浪費空間

複製代碼

• 使用prototype 方法

function A(){}

A.prototype.name = 'lala';

var a = new A();
var b = new A();

console.log(a._proto_ **= b._proto_)
// true

//a.constructor() **= A(){}
複製代碼

原生對象的原型

var aa = {};
var bb = new Object();
console.log(a.constructor **= b.constructor)//true

//純潔的 object
var pure = Object.create({
    
});
console.log('pure:',pure)

//測試數組
var a = [];
var a = new Array();
console.log('a',a)
複製代碼

多級繼承鏈怎麼實現

function Animal(color,weight){
    this.color = color;
    this.weight = weight;
    // this.eat = function(){
    // console.log('mia mia mia...');
    // }

    // this.sleep = function(){
    // console.log('hu lu lu...');
    // }
}

Animal.prototype.eat = function(){
    console.log('mia mia mia...');
}

Animal.prototype.sleep = function(){
    console.log('hu lu lu...');
}

function Manmal(color,weight){
    //綁定Animal的 顯性屬性的繼承方式 
    Animal.call(this,color,weight);
}

function Person(color,weight) {
    //綁定Animal的 本地屬性 
    Manmal.call(this,color,weight);
}

//繼承能力
var a = new Animal();
var b = new Animal();

console.log('a.eat **= b.eat:',a.eat **= b.eat);
var lsd = new Person();

//使用繼承 manmal --> animal
Manmal.prototype = Object.create(Animal.prototype); 
Manmal.prototype.constructor =  Manmal;
//將繼承的constructor 再從新指回 Manmal constructor應該爲父輩，這裏指向了爺爺
Manmal.prototype.suckle = function(){
    console.log('biu biu biu...');
}

var m =new Manmal('red',80);
console.log('m:',m);
// m.__proto__ // --> Object Animal
// m.constructor // -->func Animal
//改進之後 Manmal 爲 m 的生產廠家

//修改Person
Person.prototype = Object.create(Manmal.prototype);
Person.prototype.constructor = Manmal;
Person.prototype.lie = function(){
    console.log('你不帥！');
}

var lsd = new Person('hei',12);
console.log('lsd:',lsd);
複製代碼

總結

幾個原型鏈之間的關係: