本篇文章給大家?guī)?lái)了關(guān)于JavaScript中原型對(duì)象的相關(guān)知識(shí)，希望對(duì)大家有幫助。

你理解的類？類的特性有哪些？（封裝，繼承，多態(tài)）

類實(shí)際是一個(gè)“特殊的函數(shù)”，就像你能夠定義的函數(shù)表達(dá)式和函數(shù)聲明一樣，類語(yǔ)法也由兩個(gè)組成部分：類聲明和類表達(dá)式。類的主體都是在嚴(yán)格模式下執(zhí)行的。

類的類體是由一對(duì)花括號(hào){}中的部分，這是定義類成員的位置?！境蓡T主要是方法或者構(gòu)造函數(shù)】

類的所有方法都等價(jià)于是定義在類的prototype屬性上。在類的實(shí)列上調(diào)用方法，等同于在調(diào)用原型上的方法。

class A(){     constructor(){}     a(){}     b(){} } //等價(jià)于 A.prototype={constructor(){},a(){},b(){}}

組成：

• 構(gòu)造函數(shù)：

constructor方法是一個(gè)特殊的方法，這種方法用于創(chuàng)建和初始化一個(gè)由class創(chuàng)建的對(duì)象。一個(gè)類只能有一個(gè)構(gòu)造函數(shù)，如果多個(gè)會(huì)報(bào)錯(cuò)，如果沒(méi)有會(huì)默認(rèn)添加一個(gè)空的constructor。其中constructor默認(rèn)返回實(shí)列對(duì)象【即this】。一個(gè)構(gòu)造函數(shù)可以使用super關(guān)鍵字來(lái)調(diào)用一個(gè)父類的構(gòu)造函數(shù)。

• 屬性

• 原型方法：該方法不需要加上function關(guān)鍵字，直接把函數(shù)的定義放進(jìn)去就可以了。方法和方法之間不能用逗號(hào)分隔，會(huì)報(bào)錯(cuò)。

• 靜態(tài)方法：使用static定義靜態(tài)方法，調(diào)用靜態(tài)方法，不能類的實(shí)列去調(diào)用，只能使用類去調(diào)用。

• 取值函數(shù)getter和存值函數(shù)setter:在類中使用get和set關(guān)鍵字，對(duì)某個(gè)屬性設(shè)置存值和取值函數(shù)，攔截該屬性的存取行為。

類語(yǔ)法：

• 類聲明：使用class關(guān)鍵字

class Rectangle{     constructor(height,width){         this.height=height;         this.width=width;     } }

注意：函數(shù)聲明和類聲明的區(qū)別：類聲明不會(huì)提升，函數(shù)聲明會(huì)提升。

類表達(dá)式：類表達(dá)式可以是被命名的或匿名的。賦予一個(gè)命名類表達(dá)式的名稱是類的主體的本地名稱。

 let Rectangle=class{//匿名類       constructor(height,width){             this.height=height;             this.width=width;         }  }  let Rectangle= class Rectangle{//命名類       constructor(height,width){             this.height=height;             this.width=width;         }  }

使用extends創(chuàng)建子類：

extends關(guān)鍵字在類聲明或類表達(dá)式中用于創(chuàng)建一個(gè)類作為另一個(gè)類的子類。

使用super調(diào)用超類：

super關(guān)鍵字用于調(diào)用對(duì)象的父對(duì)象上的函數(shù)

類的特性：

– 封裝：主要是通過(guò)函數(shù)，私有屬性和方法的設(shè)置主要是通過(guò)塊級(jí)作用域?qū)崿F(xiàn)

– 多態(tài)：可以通過(guò)函數(shù)調(diào)用，因?yàn)閰?shù)是可以多變的

– 繼承：主要通過(guò)原型鏈

當(dāng)我們?cè)趎ew一個(gè)普通函數(shù)時(shí)候，發(fā)生了什么？

• 以構(gòu)造器的 prototype 屬性（注意與私有字段 [[prototype]] 的區(qū)分）為原型，創(chuàng)建新對(duì)象；

• 將this 和調(diào)用參數(shù)傳給構(gòu)造器，執(zhí)行；

• 如果構(gòu)造器返回的是對(duì)象，則返回，否則返回第一步創(chuàng)建的對(duì)象。

new 這樣的行為，試圖讓函數(shù)對(duì)象的語(yǔ)法跟類變得相似，但是，它客觀上提供了兩種方式，一是在構(gòu)造器中添加屬性，二是在構(gòu)造器的 prototype 屬性上添加屬性。

new后面的函數(shù)名一定要大寫(xiě)嗎？

不是，主要是為了便于區(qū)分類。一般約束為大寫(xiě)

如何理解ProtoType?查找一個(gè)對(duì)象的某個(gè)屬性的過(guò)程？

prototype:

每個(gè)函數(shù)都有一個(gè)特殊的屬性叫做原型對(duì)象【prototype】

js是基于原型的語(yǔ)言，每個(gè)對(duì)象都擁有一個(gè)原型對(duì)象，對(duì)象以其原型為模板、從原型繼承方法和屬性。這些屬性和方法時(shí)定義在對(duì)象的構(gòu)造函數(shù)之上的prototype屬性上，而非對(duì)象的實(shí)例本身。

原型對(duì)象可以再擁有原型對(duì)象，并從中繼承方法和屬性，一層一層，層層向上直到一個(gè)對(duì)象的原型對(duì)象為 null，這種就是原型鏈。

創(chuàng)建對(duì)象實(shí)例時(shí)，對(duì)象的實(shí)例和它的構(gòu)造器之間建立一個(gè)鏈接【__proto__屬性，是從構(gòu)造函數(shù)的prototype屬性派生的。也就是__proto__與構(gòu)造函數(shù)的prototype是指向同個(gè)對(duì)象】Object.getPrototypeof(new Foobar())和Foobar.prototype是相等的。

Object.create()。是從指定的原型對(duì)象，創(chuàng)建一個(gè)新對(duì)象。var newObj=Object.create(obj)。則newObj的__proto__=obj

每個(gè)實(shí)列對(duì)象都從原型中繼承了一個(gè)constructor屬性。該屬性指向了構(gòu)造此實(shí)例的構(gòu)造函數(shù)。

一般都是構(gòu)造器中定義屬性，在prototype定義方法。

一般由構(gòu)造函數(shù)實(shí)列化出一個(gè)新對(duì)象，新對(duì)象的原型對(duì)象是一個(gè)constructor和一個(gè)Object的原型對(duì)象組成。而函數(shù)構(gòu)造函數(shù)的原型對(duì)象是也是由另外一個(gè)constructor和一個(gè)Function的原型對(duì)象組成。

    var F=function(){};     Object.prototype.a=function(){};     Function.prototype.b=function(){};     var f=new F();     //上面的結(jié)果是，f能取到a,不能取到b.     詳解：         1.f.__proto__===F.prototype         2.F.prototype.__proto__===Object.prototype(所以f可以訪問(wèn)a)         3.f.constructor===F         4.F.__proto__===Function.prototype(所以f.constructor.b可以訪問(wèn))

查找屬性的過(guò)程：

1.先查找自己身屬性是否由包含該屬性。

2.如果沒(méi)有，才會(huì)沿著原型鏈，層層向上搜索，直到找到名字的屬性

3.如果找到最后原型鏈的末尾，即最后的原型為null，那就是沒(méi)有找到該屬性。就會(huì)返回undefined

不同方法創(chuàng)建對(duì)象和原型鏈

1.使用語(yǔ)法結(jié)構(gòu)創(chuàng)建對(duì)象

var o = {a: 1}; // o 這個(gè)對(duì)象繼承了 Object.prototype 上面的所有屬性 // o 自身沒(méi)有名為 hasOwnProperty 的屬性 // hasOwnProperty 是 Object.prototype 的屬性 // 因此 o 繼承了 Object.prototype 的 hasOwnProperty // Object.prototype 的原型為 null // 原型鏈如下: // o ---> Object.prototype ---> null var a = ["yo", "whadup", "?"]; // 數(shù)組都繼承于 Array.prototype  // (Array.prototype 中包含 indexOf, forEach 等方法) // 原型鏈如下: // a ---> Array.prototype ---> Object.prototype ---> null function f(){ return 2; } // 函數(shù)都繼承于 Function.prototype // (Function.prototype 中包含 call, bind等方法) // 原型鏈如下: // f ---> Function.prototype ---> Object.prototype ---> null

2.使用構(gòu)造函數(shù)創(chuàng)建對(duì)象

function A() { this.a = 1; this.b = 2; } A.prototype = { write: function(){     console.log(this.a); } }; var a = new A(); // a 是生成的對(duì)象，他的自身屬性有 'a' 和 'b'。

3.使用Object.create()創(chuàng)建對(duì)象(ES5)

var a = {a: 1};  // a ---> Object.prototype ---> null var b = Object.create(a); // b ---> a ---> Object.prototype ---> null console.log(b.a); // 1 (繼承而來(lái)) var c = Object.create(b); // c ---> b ---> a ---> Object.prototype ---> null var d = Object.create(null); // d ---> null console.log(d.hasOwnProperty); // undefined, 因?yàn)閐沒(méi)有繼承Object.prototype 使用

4.使用class創(chuàng)建對(duì)象(ES6)

class A { constructor(a, b) {     this.a = a;     this.b = b; } } class B extends A { constructor(a,b,c) {     super(a, b);     this.c=c; } get ab() {     return this.a + this.b; } set d(d) {     this.a = d;     this.b = d;     this.c = d; } } var a= new A('a','b');//a的原型對(duì)象是 A.prototype var b = new B('a','b','c');//    //b的原型對(duì)象是 B.prototype

當(dāng)一個(gè)對(duì)象設(shè)置屬性時(shí)都發(fā)生了什么？

如果對(duì)象包含普通數(shù)據(jù)訪問(wèn)屬性，直接賦值只會(huì)修改屬性值

var a={b=1}//因?yàn)閎是a的普通屬性，數(shù)據(jù)類型為Number

a.b="a"； //直接更改b的類型為String,且賦值為'a'.

如果對(duì)象找不到該屬性，且原型鏈也找不到，就直接默認(rèn)添加一個(gè)屬性到該對(duì)象上。

var a={}//b不是a的普通屬性，且原型鏈上也沒(méi)有

a.b="a"； //直接在a上添加b的類型，為String,且賦值為'a'.

如果屬性b，存在于原型鏈上

//在原型鏈上層存在名為b的普通數(shù)據(jù)訪問(wèn)屬性并且沒(méi)有標(biāo)記為只讀(writable:false)，那就會(huì)直接在a中添加一個(gè)名為b的新屬性,且值為'a'。而原型鏈上的b就會(huì)被屏蔽掉：

    function A(){};     A.prototype.b=1;     var a=new A();     a.b='a';

//在原型鏈上層存在b，但是他被標(biāo)記為只讀，那么無(wú)法修改已有屬性，或者在a中創(chuàng)建屏蔽屬性。如果運(yùn)行在嚴(yán)格模式下，代碼會(huì)拋出一個(gè)錯(cuò)誤，否則，這條賦值語(yǔ)句會(huì)被忽略，總之，不會(huì)發(fā)生屏蔽。

    function A(){     }; A.prototype.b=1     Object.defineProperty(A.prototype,'b',{         configurable:true,         writable:false     })     var a=new A();     a.b='a';//結(jié)果a.b還是1

【