資訊專欄INFORMATION COLUMN
摘要：圖片描述缺點(diǎn)是無法實(shí)現(xiàn)多繼承可以在構(gòu)造函數(shù)中，為實(shí)例添加實(shí)例屬性。
對(duì)象的方法
Object.assign()
對(duì)象可以簡寫 ，如果 key 和 value 相等則可以簡寫
let name = "xm";
let age = 2;
let obj = {
name，
age,
fn(){ // 可以省略函數(shù)關(guān)鍵字和冒號(hào)：
console.log(22);
}
}
對(duì)象新增的方法 Object.setPrototypeOf()
let o2 = {
age: 22,
name: "mazz"
}
let o1 = {
name: "zz",
__proto__: o2
getO2Name(){
return super.name
}
}
// __proto__ 每一個(gè)對(duì)象上都有這個(gè)東西，如果自己家找不到 會(huì)通過這個(gè)鏈向上找
Object.setPrototypeOf(o1,o2); // 通過這個(gè)方法 把 o1 的鏈指向 o2
// super 在子對(duì)象中指向的是 __proto__對(duì)應(yīng)的內(nèi)容
// 等價(jià)于 o1.__proto__= o2;
console.log(o1.age); // 22
console.log(o1.getO2Name())
class
js 沒有類的概念,js的繼承是通過 prototype 實(shí)現(xiàn)的，每個(gè)構(gòu)造函數(shù)上都有一個(gè) prototype 屬性，指向他的原型對(duì)象，原型對(duì)象上的 constructor 指向了構(gòu)造函數(shù) ，構(gòu)造函數(shù)實(shí)例化后有一個(gè)proto 指向原型對(duì)象 原型對(duì)象的 constructor 指向構(gòu)造函數(shù) 就實(shí)現(xiàn)了 繼承
1.原型鏈?zhǔn)窃趺磳?shí)現(xiàn)繼承的？
2.可以圍繞構(gòu)造函數(shù)說一下的？
3.構(gòu)造函數(shù)實(shí)例化后是怎么繼承構(gòu)造函數(shù)的屬性
4.怎么向原型對(duì)象上添加屬性
function Person (){} //聲明一個(gè)函數(shù) js中 函數(shù)是對(duì)象 也是構(gòu)造函數(shù)
console.log(Person.prototype); // Person 對(duì)象的原型
// 由此打印出來的結(jié)果 可以看出 Person對(duì)象的原型上有 一個(gè)constructor 屬性, 它指向 Person 的構(gòu)造函數(shù) 也就是Person本身 還有一個(gè)__proto__屬性
function Person(name) {
this.name = name; // 私有的
}
Person.prototype.eating = function() {//給對(duì)象的原型對(duì)象上添加一個(gè)eating 的方法 ，new 出來的實(shí)例 都會(huì)共享此方法的
console.log("eat food")
}
Person.prototype.age = 12;// 給對(duì)象的原型對(duì)象上 添加一個(gè)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的對(duì)象 他們都會(huì)共享原型對(duì)象上的方法和屬性的
**WHY?? 這個(gè)實(shí)例 能夠訪問 原型對(duì)象上的方法及屬性的 **
//其實(shí) p1 的實(shí)例上有一個(gè)指針，這個(gè)指針指向 構(gòu)造函數(shù)的原型對(duì)象（通俗點(diǎn) 也就是所屬類的原型）此時(shí)原型對(duì)象中的方法及屬性自然也就能訪問到的
總結(jié)下 構(gòu)造函數(shù) 原型 和實(shí)例的關(guān)系：
每一個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象(prototype) 原型對(duì)象上 擁有一個(gè)指向構(gòu)造函數(shù)的指針（constructor）
實(shí)例上擁有一個(gè)指向原型對(duì)象的指針 即 proto
類 以前就是構(gòu)造函數(shù) 分為私有和公有
function Parent () {
this.name = "maz"; // 當(dāng)前parent的私有的屬性 實(shí)例上自己調(diào)用的
}
// new 出來的實(shí)例可以調(diào)用原型上的方法
Parent.prototype.coding = function(){ // 公有的 別人繼承了 都可以用的
console.log("有思想的coding");
}
function Child () {
}
Child.prototype = new Parent() // 核心 主要就是 子類的原型指向 父類的實(shí)例
let c = new Child();
console.log(c.constructor); // Parent
console.log(c.name,c.coding()); //拿到 公有方法和私有屬性
原型鏈繼承的一種基本模式 其原理就是 對(duì)象的實(shí)例 擁有一個(gè)指向原型對(duì)象的指針（指向所屬類的原型）Child 的 原型對(duì)象擁有了 Parent 的實(shí)例后，自然也擁有了一個(gè)指向 Parent 原型對(duì)象的指針了。此時(shí) 我們 new 一個(gè) Child 的實(shí)例 c 時(shí)，c 實(shí)例包含著一個(gè)指向Child 原型的指針, Child.prototype 擁有一個(gè)指向 Parent 原型對(duì)象的指針，Parent 原型本身包含著一個(gè)指向自身構(gòu)造函數(shù)的指針，這樣一來，就構(gòu)成了實(shí)例與原型的鏈條，也就是所謂的原型鏈的概念了
**注意**：這里的c對(duì)象的 constructor 現(xiàn)在指向了 Parent 了，因?yàn)?Child 的原型指向了 另外一個(gè)對(duì)象 Parent 的原型，而這個(gè)原型對(duì)象的 constructor 指向的是 Parent。
![圖片描述][2]
缺點(diǎn)是：
1. 無法實(shí)現(xiàn)多繼承
2. 可以在Child 構(gòu)造函數(shù)中，為Child實(shí)例添加實(shí)例屬性 。如果要新增 原型屬性或者方法的話 則必須放在 new Child() 實(shí)例化之后執(zhí)行。
3.來自原型對(duì)象的所有屬性被所有的實(shí)例共享
4.創(chuàng)建子類實(shí)例時(shí)，無法向父類構(gòu)造函數(shù)傳參
// 一般就不用 上面 這種方式了
// Object.Create() // 只是繼承公有方法
Parent.fn = funciton (){ //屬于Parent 類上的私有屬性
}
![圖片描述][3]
function create(parentProto,param){
function Fn(){} // 相當(dāng)于構(gòu)建一個(gè)類 類的原型鏈指向了父類的原型
Fn.prototype = parentProto;
let fn = new Fn();
fn.constructor = param.constructor.value; // 手動(dòng)改變constructor的指向
return fn;
}
// 子類查找時(shí) 可以查到父類的原型，所以可以拿到父類的公共方法
Child.prototype =create(Parent.prototype);
let child = new Child();
console.log(child.coding())
console.log(child.constructor);// Parent
**希望這里的constructor是Child 怎么實(shí)現(xiàn)呢？**
Child.prototype =create(Parent.prototype,{constructor:{ value: Child }})
let child = new Child;
console.log(child.constructor);// Child
//靜態(tài)屬性 是可以繼承的
Child.__proto__ = Parent;
Child.fn();
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105814.html
摘要：第一種方式是使用操作符，只要檢測的實(shí)例對(duì)象中的原型鏈包含出現(xiàn)過的構(gòu)造函數(shù)，結(jié)果就會(huì)返回。而這也正是組合使用原型模式和構(gòu)造函數(shù)模式的原因。在構(gòu)造函數(shù)模式中定義屬性，在原型模式中定義共享的方法。 前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《Ja...
摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個(gè)繼承層級(jí)，而實(shí)線表示屬性引用。原型鏈?zhǔn)菍?shí)現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。 之前有朋友問怎么去理解原型和原型鏈的問題。這個(gè)問題，在面試中，很多同學(xué)經(jīng)常都會(huì)遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...
摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個(gè)繼承層級(jí)，而實(shí)線表示屬性引用。原型鏈?zhǔn)菍?shí)現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。 之前有朋友問怎么去理解原型和原型鏈的問題。這個(gè)問題，在面試中，很多同學(xué)經(jīng)常都會(huì)遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...
摘要：簡單回顧一下構(gòu)造函數(shù)原型和實(shí)例對(duì)象之間的關(guān)系每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象。找到生成構(gòu)造函數(shù)的原型對(duì)象的構(gòu)造函數(shù)，搜索其原型對(duì)象，找到了。 JS面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的實(shí)現(xiàn) - 原型鏈 前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaS...
摘要：相當(dāng)于在用原型繼承編寫復(fù)雜代碼前理解原型繼承模型十分重要。同時(shí)，還要清楚代碼中原型鏈的長度，并在必要時(shí)結(jié)束原型鏈，以避免可能存在的性能問題。 js是一門動(dòng)態(tài)語言,js沒有類的概念,ES6 新增了class 關(guān)鍵字，但只是語法糖，JavaScript 仍舊是基于原型。 至于繼承,js的繼承與java這種傳統(tǒng)的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個(gè)對(duì)象都有一...
閱讀 3577·2023-04-26 02:05
閱讀 2021·2021-11-19 11:30
閱讀 4230·2021-09-30 09:59
閱讀 3184·2021-09-10 10:51
閱讀 2614·2021-09-01 10:30
閱讀 1496·2021-08-11 11:20
閱讀 2626·2019-08-30 15:54
閱讀 572·2019-08-30 10:49
