js中的原型的示例分析

小編給大家分享一下js中的原型的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在講js的原型之前，必須先了解下Object和Function。

Object和Function都作為JS的自帶函數(shù)，Object繼承自己，F(xiàn)untion繼承自己，Object和Function互相是繼承對(duì)方，也就是說(shuō)Object和Function都既是函數(shù)也是對(duì)象。

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

Object 是 Function的實(shí)例，而Function是它自己的實(shí)例。

console.log(Function.prototype); // ? () { [native code] }
console.log(Object.prototype);  // Object

普通對(duì)象和函數(shù)對(duì)象

JavaScript中萬(wàn)物皆對(duì)象，但對(duì)象之間也是有區(qū)別的。分為函數(shù)對(duì)象和普通對(duì)象。

函數(shù)對(duì)象可以創(chuàng)建普通對(duì)象，普通對(duì)象沒(méi)法創(chuàng)建函數(shù)對(duì)象，普通對(duì)象JS世界中最低級(jí)的小嘍啰，啥特權(quán)也沒(méi)有。

凡是通過(guò)new Function創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，其他都是普通對(duì)象（通常通過(guò)Object創(chuàng)建），可以通過(guò)typeof來(lái)判斷。

function f1(){};
typeof f1 //"function"


var o1 = new f1();
typeof o1 //"object"

var o2 = {};
typeof o2 //"object"

這邊要注意的是下面這兩種寫(xiě)法是一樣的

function f1(){};  ==  var f1 = new Function();

function f2(a,b){
  alert(a+b);
}

等價(jià)于

var f2 = new Function(a,b,"alert(a+b)");

prototype、_proto_和construetor（構(gòu)造函數(shù)）

下面兩句話(huà)也很重要

1、每一個(gè)函數(shù)對(duì)象都有一個(gè)prototype屬性，但是普通對(duì)象是沒(méi)有的；

　 prototype下面又有個(gè)construetor，指向這個(gè)函數(shù)。

2、每個(gè)對(duì)象都有一個(gè)名為_(kāi)proto_的內(nèi)部屬性，指向它所對(duì)應(yīng)的構(gòu)造函數(shù)的原型對(duì)象，原型鏈基于_proto_;

好了,開(kāi)始上代碼和例子,建一個(gè)普通對(duì)象，我們可以看到

　　1、o的確沒(méi)有prototype屬性

　　2、o是Object的實(shí)例

　　3、o的__proto__指向Object的prototype

　　4、Object.prototype.constructor指向Object本身

　　還可以繼續(xù)往下延伸......

var o = {};
  console.log(o.prototype); //undefined
  console.log(o instanceof Object); //true
  console.log(o.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true 
  console.log(Object.prototype.constructor) //function Object()
　　console.log(Object.prototype.__proto__); //null

下面來(lái)一個(gè)函數(shù)對(duì)象，從下面的例子可以看出

1、demo是函數(shù)對(duì)象，f1還是普通對(duì)象

2、f1是Demo的實(shí)例

3、demo的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

function Demo(){};
  var f1 = new Demo();
  console.log(f1.prototype); //undefined
  console.log(f1 instanceof Demo); //true
  console.log(f1.__proto__ === Demo.prototype); //true
  console.log(Demo === Demo.prototype.constructor) ;//true
  console.log(Demo.prototype.__proto__ === Object.prototype) ;//true
  console.log(Object.prototype.__proto__); //null

原型鏈

javascript中，每個(gè)對(duì)象都會(huì)在內(nèi)部生成一個(gè)proto 屬性，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象屬性時(shí)，如果這個(gè)對(duì)象不存在就回去proto 指向的對(duì)象里面找，一層一層找下去，這就是javascript原型鏈的概念。

f1.__proto__ ==> Demo.prototype ==> Demo.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS中所有的東西都是對(duì)象,所有的東西都由Object衍生而來(lái), 即所有東西原型鏈的終點(diǎn)指向null

以上是“js中的原型的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！