一起來了解JavaScript面向?qū)ο?/h1>

 更新時(shí)間：2021年09月26日 16:33:41   作者：還是不會(huì)呀  

本篇文章主要介紹了Javascript的面向?qū)ο螅【幱X得這篇文章內(nèi)容很不錯(cuò)，需要的朋友可以看下，希望能夠給你帶來幫助

目錄

• JavaScript原型鏈
• Object的原型
• 頂層原型
• 創(chuàng)建Object對(duì)象的內(nèi)存圖
• Object是所有類的父類
• 原型鏈實(shí)現(xiàn)繼承
• 借用構(gòu)造函數(shù)實(shí)現(xiàn)繼承
• 總結(jié)

JavaScript原型鏈

每一個(gè)對(duì)象都有原型，指向另一個(gè)對(duì)象，另一個(gè)對(duì)象也有自己的原型，就這樣由原型的原型構(gòu)成的鏈條就叫原型鏈。

原型鏈的盡頭

如果一個(gè)原型鏈?zhǔn)?，沒用盡頭的，那么在查找一原型鏈上不存在的屬性時(shí)，就會(huì)一直查找下去，存在死循環(huán)了。顯然不是這樣的，那么原型鏈的盡頭是什么？

Object的原型

頂層原型

看代碼~

// obj字面量創(chuàng)建方法類似于 new Object()
// 那么 obj對(duì)象就是Object的一個(gè)實(shí)例,也就是說obj.__proto__ === Object.prototype
var obj = {
  name: "fzb",
};
// 那么obj.__proto__ 或者 Oject.prototype 的__proto__ 是什么？ 答案是: null
console.log(obj.__proto__); // [Object: null prototype] {}
console.log(obj.__proto__.__proto__); // null

[Object: null prototype] {}的特殊之處：

1、該對(duì)象存在原型屬性，只是原型指向了null，就是已經(jīng)是頂層原型了。

2、該對(duì)象上還存在許多其他的方法，只是不可枚舉，看不到。

創(chuàng)建Object對(duì)象的內(nèi)存圖

上方例子的內(nèi)存圖

Object是所有類的父類

原型鏈最頂層的原型對(duì)象就是Object的原型對(duì)象

例子：

function Student(sno, name) {
  this.sno = sno;
  this.name = name;
}
const stu = new Student(201801, "fzb");

console.log(stu); // Student { sno: 201801, name: 'fzb' }
console.log(stu.__proto__); // {}
console.log(stu.__proto__.__proto__); // [Object: null prototype] {}

console.log(Student.__proto__); // {}
/* ***************后面將具體講解注釋內(nèi)容***************
 * 為什么不是 Student.__proto__ = [Object: null prototype] {}
 * 是因?yàn)?Student.__proto__ = Function.prototype 
 * Function.prototype.__proto__ = Object.prototype = [Object: null prototype] {}
 * ***************后面將具體講解注釋內(nèi)容***************
 */
console.log(Student.__proto__.__proto__); // [Object: null prototype] {}

內(nèi)存圖：

原型鏈實(shí)現(xiàn)繼承

繼承可以重復(fù)利用代碼，子類可以使用

例子：

function Person() {
  this.name = "fzb";
}

Person.prototype.running = function () {
  console.log(this.name + "正在跑步~");
};

function Student(sno) {
  this.sno = sno;
}
Student.prototype = new Person();
// 重寫整個(gè)原型對(duì)象之后，要重新配置 constructor
Object.defineProperty(Student.prototype, "constructor", {
  configurable: true,
  enumerable: false,
  writable: true,
  value: Student,
});
Student.prototype.studying = function () {
  console.log(this.name + "正在學(xué)習(xí)");
};

const stu = new Student(201801);
stu.running(); // fzb正在跑步~
stu.studying(); // fzb正在學(xué)習(xí)

內(nèi)存圖：

缺陷

1> 在打印子類對(duì)象時(shí)，有些屬性本應(yīng)該打印出來的，但是因?yàn)樵诟割惿希瑹o法打印出來。

2> 多個(gè)子類對(duì)象在進(jìn)行某些操作時(shí)，會(huì)出現(xiàn)相互影響。

// 在上方例子上，加一點(diǎn)點(diǎn)代碼，
function Person() {
  this.name = "fzb";
  this.friends = []; // 增加一個(gè)屬性
}
const stu1 = new Student(201801);
stu1.friends.push("zzw");
const stu2 = new Student(201801);
console.log(stu2.friends); // [ 'zzw' ]
// stu2上取到了stu1的friends屬性，這是不可以的

3> 無法傳遞參數(shù)，有些屬性存在父類構(gòu)造函數(shù)內(nèi)，子類實(shí)例化時(shí)，初始化參數(shù)無法傳入到父類。

借用構(gòu)造函數(shù)實(shí)現(xiàn)繼承

在子類構(gòu)造函數(shù)內(nèi)，調(diào)用構(gòu)造函數(shù)。使改變父類構(gòu)造函數(shù)內(nèi)的this指向，然后父類在this上添加的屬性就會(huì)在子類實(shí)例化的對(duì)象上。

function Person(name) {
  this.name = name;
  this.friends = [];
}

Person.prototype.running = function () {
  console.log(this.name + "正在跑步~");
};

function Student(sno, name) {
  Person.call(this, name); // 添加代碼
  this.sno = sno;
}
Student.prototype = new Person();
// 重寫整個(gè)原型對(duì)象之后，要重新配置 constructor
Object.defineProperty(Student.prototype, "constructor", {
  configurable: true,
  enumerable: false,
  writable: true,
  value: Student,
});
Student.prototype.studying = function () {
  console.log(this.name + "正在學(xué)習(xí)");
};

const stu1 = new Student(201801,"stu1");
stu1.friends.push("zzw");
const stu2 = new Student(201802,"stu2");
console.log(stu2.friends); // []

這時(shí)原型鏈實(shí)現(xiàn)繼承的三個(gè)弊端，就解決的。但是又出現(xiàn)了新的缺陷。

缺陷

1> 父類構(gòu)造函數(shù)至少執(zhí)行了兩次以上

2> 子類構(gòu)造函數(shù)的原型對(duì)象是父類的實(shí)例對(duì)象，那么個(gè)對(duì)象上的屬性將會(huì)是undefined

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

• 詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
• JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì)詳解【類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等】
• JavaScript面向?qū)ο笾叽蠡驹瓌t實(shí)例詳解
• JS面向?qū)ο缶幊袒A(chǔ)篇（三） 繼承操作實(shí)例詳解
• JS面向?qū)ο缶幊袒A(chǔ)篇（二） 封裝操作實(shí)例詳解
• JS面向?qū)ο缶幊袒A(chǔ)篇（一） 對(duì)象和構(gòu)造函數(shù)實(shí)例詳解

• JavaScript
• 面向?qū)ο?/a>

相關(guān)文章

• 

  Bootstrap每天必學(xué)之標(biāo)簽與徽章

  Bootstrap每天必學(xué)之標(biāo)簽與徽章，對(duì)Bootstrap標(biāo)簽與徽章小編也了解的很少，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap標(biāo)簽與徽章，從中得到收獲。

  2015-11-11
• 

  關(guān)于安卓手機(jī)微信瀏覽器中使用XMLHttpRequest 2上傳圖片顯示字節(jié)數(shù)為0的解決辦法

  這篇文章主要介紹了關(guān)于安卓手機(jī)微信瀏覽器中使用XMLHttpRequest 2上傳圖片顯示字節(jié)數(shù)為0的解決辦法 的相關(guān)資料,需要的朋友可以參考下

  2016-05-05
• 

  js無刷新操作table的行和列

  這篇文章主要介紹了js操作table的行和列，無刷新實(shí)現(xiàn),需要的朋友可以參考下

  2014-03-03
• 

  在小程序開發(fā)中使用npm的方法

  微信小程序在 2.2.1 版本后增加了對(duì) npm 包加載的支持，使得小程序支持使用 npm 安裝第三方包。這篇文章主要介紹了在小程序開發(fā)中使用npm的方法，感興趣的小伙伴們可以參考一下

  2018-10-10
• 

  Worker加載JS腳本跨域問題的幾種解決方法

  Web Worker 是一種在后臺(tái)線程中運(yùn)行的 JavaScript 腳本,允許我們?cè)诓蛔枞骶€程的情況下執(zhí)行復(fù)雜計(jì)算或處理,Worker 加載的 JS 腳本如果存在跨域問題,可能導(dǎo)致腳本無法正常加載和執(zhí)行,以下是解決 Worker 加載 JS 腳本跨域問題的幾種方法,需要的朋友可以參考下

  2025-02-02
• 

  javascript 中的try catch應(yīng)用總結(jié)

  這篇文章主要介紹了javascript 中的try catch應(yīng)用總結(jié)的相關(guān)資料,需要的朋友可以參考下

  2017-04-04
• 

  JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)

  這篇文章主要介紹了JS操作XML的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript加載與解析XML文件及字符串的相關(guān)技巧,需要的朋友可以參考下

  2015-12-12
• 

  JavaScript實(shí)現(xiàn)數(shù)組在指定位置插入若干元素的方法

  這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組在指定位置插入若干元素的方法,涉及javascript中splice方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

  2015-04-04
• 

  js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容

  這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2021-10-10
• 

  JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性

  這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下

  2017-07-07

最新評(píng)論