js 的原型原型鏈原型鏈的繼承

soasme 發布于2019-08-26 10:13 / 1508人閱讀

摘要：圖片描述缺點是無法實現多繼承可以在構造函數中，為實例添加實例屬性。

對象的方法

Object.assign()
對象可以簡寫 ，如果 key 和 value 相等則可以簡寫
let name = "xm";
let age = 2;
let obj = {
    name，
    age,
    fn(){ // 可以省略函數關鍵字和冒號：
        console.log(22);
    }
}
對象新增的方法 Object.setPrototypeOf()

let o2 = {
    age: 22,
    name: "mazz"
}
let o1 = {
    name: "zz",
    __proto__: o2
    getO2Name(){
        return super.name
    }
}
// __proto__ 每一個對象上都有這個東西，如果自己家找不到 會通過這個鏈向上找
Object.setPrototypeOf(o1,o2); // 通過這個方法 把 o1 的鏈指向 o2
// super 在子對象中指向的是 __proto__對應的內容
// 等價于 o1.__proto__= o2;
console.log(o1.age); // 22
console.log(o1.getO2Name())

class

js 沒有類的概念,js的繼承是通過 prototype 實現的，每個構造函數上都有一個 prototype 屬性，指向他的原型對象，原型對象上的 constructor 指向了構造函數 ，構造函數實例化后有一個proto 指向原型對象 原型對象的 constructor 指向構造函數 就實現了 繼承

1.原型鏈是怎么實現繼承的？
2.可以圍繞構造函數說一下的？
3.構造函數實例化后是怎么繼承構造函數的屬性
4.怎么向原型對象上添加屬性

function Person (){} //聲明一個函數 js中 函數是對象 也是構造函數
console.log(Person.prototype); // Person 對象的原型
// 由此打印出來的結果 可以看出 Person對象的原型上有 一個constructor 屬性, 它指向 Person 的構造函數 也就是Person本身 還有一個__proto__屬性
 function Person(name) {
     this.name = name; // 私有的
 }
 Person.prototype.eating = function() {//給對象的原型對象上添加一個eating 的方法 ，new 出來的實例 都會共享此方法的
     console.log("eat food")
 }
 Person.prototype.age = 12;// 給對象的原型對象上 添加一個age 屬性
    var p1 = new Person("blob");
   var p2 = new Person("lisa");
console.log(p1.age,p2.age); // 12,12
console.log(p1.eating(),p2.eating()); // eat food eat food
![圖片描述][1]
// 所以只要是Person的對象 他們都會共享原型對象上的方法和屬性的
**WHY?? 這個實例 能夠訪問 原型對象上的方法及屬性的 **
  //其實 p1 的實例上有一個指針，這個指針指向 構造函數的原型對象（通俗點 也就是所屬類的原型）此時原型對象中的方法及屬性自然也就能訪問到的

總結下構造函數原型和實例的關系：

每一個構造函數都有一個原型對象(prototype) 原型對象上擁有一個指向構造函數的指針（constructor）

實例上擁有一個指向原型對象的指針即 proto

類以前就是構造函數分為私有和公有

 function Parent () {
    this.name = "maz"; // 當前parent的私有的屬性 實例上自己調用的
  }
// new 出來的實例可以調用原型上的方法
Parent.prototype.coding = function(){  // 公有的 別人繼承了 都可以用的
    console.log("有思想的coding");
}

function Child () {
}

Child.prototype = new Parent() // 核心 主要就是 子類的原型指向 父類的實例
let c = new Child();
console.log(c.constructor); // Parent
console.log(c.name,c.coding()); //拿到 公有方法和私有屬性

原型鏈繼承的一種基本模式 其原理就是 對象的實例 擁有一個指向原型對象的指針（指向所屬類的原型）Child 的 原型對象擁有了 Parent 的實例后，自然也擁有了一個指向 Parent 原型對象的指針了。此時 我們 new 一個 Child 的實例 c 時，c 實例包含著一個指向Child 原型的指針, Child.prototype 擁有一個指向 Parent 原型對象的指針，Parent 原型本身包含著一個指向自身構造函數的指針，這樣一來，就構成了實例與原型的鏈條，也就是所謂的原型鏈的概念了
**注意**：這里的c對象的 constructor 現在指向了 Parent 了，因為 Child 的原型指向了 另外一個對象 Parent 的原型，而這個原型對象的 constructor 指向的是 Parent。
![圖片描述][2]


缺點是：
1. 無法實現多繼承
2. 可以在Child 構造函數中，為Child實例添加實例屬性 。如果要新增 原型屬性或者方法的話 則必須放在 new Child() 實例化之后執行。
3.來自原型對象的所有屬性被所有的實例共享
4.創建子類實例時，無法向父類構造函數傳參

// 一般就不用 上面 這種方式了
// Object.Create()  // 只是繼承公有方法
Parent.fn = funciton (){ //屬于Parent 類上的私有屬性

}
![圖片描述][3]
function create(parentProto,param){
    function Fn(){} // 相當于構建一個類 類的原型鏈指向了父類的原型
    Fn.prototype = parentProto;
    let fn = new Fn();
    fn.constructor = param.constructor.value; // 手動改變constructor的指向
    return fn;
}
// 子類查找時 可以查到父類的原型，所以可以拿到父類的公共方法
Child.prototype =create(Parent.prototype);
let child = new Child();
console.log(child.coding())
console.log(child.constructor);// Parent
**希望這里的constructor是Child 怎么實現呢？**
Child.prototype =create(Parent.prototype,{constructor:{ value: Child }})
let child = new Child;
console.log(child.constructor);// Child
//靜態屬性 是可以繼承的
Child.__proto__ = Parent;
Child.fn();

云服務器 GPU云服務器 js原型鏈的繼承原型鏈繼承原型繼承原型原型鏈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105814.html

JS面向對象的程序設計之繼承的實現 - 原型鏈的注意點

摘要：第一種方式是使用操作符，只要檢測的實例對象中的原型鏈包含出現過的構造函數，結果就會返回。而這也正是組合使用原型模式和構造函數模式的原因。在構造函數模式中定義屬性，在原型模式中定義共享的方法。前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內容引用自《Ja...

pf_miles 2019-08-23 12:26 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
JS面向對象的程序設計之繼承的實現 - 原型鏈

摘要：簡單回顧一下構造函數原型和實例對象之間的關系每個構造函數都有一個原型對象。找到生成構造函數的原型對象的構造函數，搜索其原型對象，找到了。 JS面向對象的程序設計之繼承的實現 - 原型鏈前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內容引用自《JavaS...

zhaochunqi 2019-08-23 12:22 評論0 收藏0
理解js的原型與繼承

摘要：相當于在用原型繼承編寫復雜代碼前理解原型繼承模型十分重要。同時，還要清楚代碼中原型鏈的長度，并在必要時結束原型鏈，以避免可能存在的性能問題。 js是一門動態語言,js沒有類的概念,ES6 新增了class 關鍵字，但只是語法糖，JavaScript 仍舊是基于原型。至于繼承,js的繼承與java這種傳統的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個對象都有一...

wthee 2019-08-20 12:25 評論0 收藏0