最近看到一個(gè)別人寫(xiě)的js類庫(kù)，突然對(duì)js中的原型及繼承產(chǎn)生了一些想法，之前也看過(guò)其中的一些內(nèi)容，但是總不是很清晰，這幾天利用空閑時(shí)間，對(duì)這塊理解了一下，感覺(jué)還是有不通之處，思路上沒(méi)那么條理，僅作為分享，

一、instanceof

在JavaScript有instanceof運(yùn)算符，是二元運(yùn)算符，使用方法 instanceA instanceof A，返回值是布爾值（boolean），含義是判斷instanceA是否是A的一個(gè)實(shí)例，其實(shí)質(zhì)是判斷A.prototype===instanceA.__proto__，如

function f2(){
  var f=function(){}
  var test=new f();
  console.log(test instanceof f);//true
  console.log((f.prototype===test.__proto__));//true
}

上邊的兩個(gè)打印都是true。說(shuō)明test是f的一個(gè)實(shí)例；test的__proto__屬性指向了f的prototype對(duì)象，即f的prototype屬性是一個(gè)對(duì)象，且此對(duì)象是f的一個(gè)實(shí)例。

二、js中對(duì)象

在js中一切皆是對(duì)象，對(duì)象分為函數(shù)對(duì)象和普通對(duì)象，常用的函數(shù)其實(shí)是函數(shù)對(duì)象，如

//函數(shù)對(duì)象
  var f=function(){}
  var f2=new Function('str','console.log(str)')
  function f3(){}
  //普通對(duì)象
  var o=new Object();
  var o2={}
  var o3=new f()

上面看到f、f2、f3是函數(shù)對(duì)象，o、o2、o3是普通對(duì)象。

函數(shù)對(duì)象和普通對(duì)象的區(qū)別：

所有使用new Function()的方式創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，f和f3兩種方式，最終是也是使用new Function()方式創(chuàng)建的；

在定義一個(gè)對(duì)象時(shí)，對(duì)象中包含一些預(yù)定義的屬性，如，prototype、__proto__，其中prototype屬性只有函數(shù)對(duì)象才有，__proto__則是對(duì)所有的對(duì)象都有，所以可以通過(guò)對(duì)象的__proto__屬性判斷一個(gè)對(duì)象是函數(shù)對(duì)象還是普通對(duì)象，如

//函數(shù)對(duì)象
  var f=function(){}
  //普通對(duì)象
  var o=new Object();
  console.log(f.prototype);//Object {}
  console.log(o.prototype);//undefined

從上邊可以得出函數(shù)對(duì)象存在prototype屬性，而普通對(duì)象的prototype對(duì)象則是未定義。

三、原型鏈

從上邊知道所有的對(duì)象都有一個(gè)__proto__屬性，這個(gè)屬性指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象prototype，我們把這種使用__proto__屬性串起來(lái)的鏈叫做原型鏈，如下面是一個(gè)原型鏈，

上圖，以person為例，說(shuō)明原型鏈，

var person=function(){}
var person1=new person();

1、person是一個(gè)函數(shù)對(duì)象，person1是person的一個(gè)實(shí)例

2、person1的__proto__屬性是person的原型對(duì)象person.prototype

3、由于person的原型對(duì)象person.prototype是一個(gè)對(duì)象，它也有一個(gè)__proto__屬性，這個(gè)屬性指向的Object的原型對(duì)象Object.prototype

4、Object的原型對(duì)象Object.prototype是一個(gè)對(duì)象，它也有一個(gè)__proto__屬性，這個(gè)屬性的原型對(duì)象為null。

四、一些繼承

在js中我們會(huì)定義一個(gè)函數(shù)對(duì)象，如

var person=function(){}

上面我們定義了一個(gè)函數(shù)對(duì)象，它沒(méi)有任何的屬性，是一個(gè)空對(duì)象，由于它是一個(gè)對(duì)象，所以可以為它增加屬性，

var person=function(){}
person.name1='js'
console.log(person.name1)//js

上面的代碼為person新增了一個(gè)name屬性，且賦值為js，且可以打印出name屬性的值
但是當(dāng)我們創(chuàng)建一個(gè)person的實(shí)例person1的時(shí)候，如下

var person= function(){};
  person.name1= 122;
  console.log(person.name1);
  var person1=new person();
  console.log(person1.name1);//undefined

可以看到person1沒(méi)有name1這個(gè)屬性，那么如何才能保證person的實(shí)例也有name1屬性呢，

var person= function(){};
  person.name1= 122;
  //使用prototype對(duì)象為對(duì)象添加屬性，這樣所以的實(shí)例都會(huì)有此屬性
  person.prototype.name1='12';
  console.log(person.name1);
  var person1=new person();
  console.log(person1.name1);//12

上面，使用了person.protoype.name1='12'，這樣所有的實(shí)例都有了name1屬性，使用這種方式添加的屬性，在生成實(shí)例的時(shí)候會(huì)把屬性當(dāng)作實(shí)例的共有屬性。

以上這篇基于js中的原型、繼承的一些想法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。