Js面向對象的四層 -Axel Rauschmayer

時間 2019-12-12

標籤面向對象四層 axel rauschmayer 欄目 JavaScript 简体版

原文原文鏈接

第一層單一對象

建立對象

對象：字符和數值的映射es6
屬性：訪問映射函數
方法：屬性的值是函數this
- this 指向函數的接受者es5

var jane ={
    //屬性
    name='Jane',
    
    //方法
    describe:function(){
        return 'Person named'+this.name;
    }

https://www.youtube.com/watch?v=VJOTcUsD2kA&t=6m16sspa

對象和映射（map）

相同點：

很是動態：自由刪除增長屬性prototype

不一樣點：

繼承（原型鏈繼承）code
快速訪問屬性（經過構造器器）對象

第二層原型鏈 prototype chains

引出共享屬性繼承

var jane = {
    name:"jane",
    describe:function(){
        return 'Person named' +this.name;
    }

};

var tarzan = {
    name:'Tarzan',
    describe:function(){
        return 'Person named' + this.name;
    }
};

解決方案：經過原型繼承圖片

jane 和 tarzan 經過共享一個原型對象。
原型鏈和簡單對象同樣

var PersonProto ={
    describe:function(){
        return  'Person named' +this.name;
    }
}

var jane = {
    __proto__:PersonProto,
    name:'Jane'

};
var tarzan = {
    __proto__:PersonProto,
    name:'Tarzan'
};

獲取和設置原型

es6： _proto _
es5:
- Object.create()
- Object.getPrototypeOf()

Obejct.create(proto):

var PersonProto = {
    decribe:function(){
        return 'Pseson named' + this.name;
    }
};

var jane = Object.create(PersonProto);
jane.name='Jane';

Object.getPrototypeOf(obj):

# Object.getPrototypeOf(jane) === PersonProto
true

第三層構造器

persons的構造器

function Person(name){
    this.name = name;
    this.decsribe = funciont(){
        return 'Person named' + this.name;
    };
 }
 
 var jane = new Person ('Jane');
 console.log(jane instanceof Person); //true

如何消除冗餘？

//特性的屬性
 function Person(name){
    this.name = name;
 }
 
 //共享屬性
 Person.prototype.describe = function(){
    return  'Person named'+ this.name;
 }

instanceof是怎麼工做的？

value instanceof Constr

檢查 constructor.prototype是否在value的原型鏈上。
Constr.prototype.isPrototypeOf(value)

第四層構造器的繼承

目標： employee 繼承 Person

function Person(name){
    this.name = name;
}
Person.prototype.sayHelloto = function (otherName){
    console.log(this.name +'says hello to' + otherName);
}
Person.prototype.describe = function(){
    return 'Person named' + this.name;
}

Employee(name,title)和Person同樣，除了：

其餘屬性：title
describe（） return 'Person named <name> (<title>)'

爲了繼承，employee必須作：

繼承Person的屬性
創造屬性title
繼承Person的原型屬性
重寫Person.prototype.describe

function Employee (name,title){
    Person.call(this,name); //繼承全部屬性
    this.title = title ； //增長title屬性
}
Employee.prototype = Object.create(Person.prototype);//繼承原型屬性
Employee.prototype.describe = function(){//重寫原型describe
    return Person.prototype.describe.call(this)+ '('+this.title+')'; //重寫方法
}