自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

前端基礎(chǔ)進(jìn)階:JS原型、原型鏈、對(duì)象

開發(fā) 前端
JavaScript 中,萬物皆對(duì)象!但對(duì)象也是有區(qū)別的。分為普通對(duì)象和函數(shù)對(duì)象,Object 、Function 是 JS 自帶的函數(shù)對(duì)象。下面舉例說明

 一. 普通對(duì)象與函數(shù)對(duì)象

JavaScript 中,萬物皆對(duì)象!但對(duì)象也是有區(qū)別的。分為普通對(duì)象和函數(shù)對(duì)象,Object 、Function 是 JS 自帶的函數(shù)對(duì)象。下面舉例說明:

  1. var o1 = {};   
  2. var o2 =new Object();  
  3. var o3 = new f1();  
  4. function f1(){};   
  5. var f2 = function(){};  
  6. var f3 = new Function('str','console.log(str)');  
  7. console.log(typeof Object); //function   
  8. console.log(typeof Function); //function    
  9. console.log(typeof f1); //function   
  10. console.log(typeof f2); //function   
  11. console.log(typeof f3); //function     
  12. console.log(typeof o1); //object   
  13. console.log(typeof o2); //object   
  14. console.log(typeof o3); //object 

在上面的例子中 o1 o2 o3 為普通對(duì)象,f1 f2 f3 為函數(shù)對(duì)象。

怎么區(qū)分,其實(shí)很簡(jiǎn)單,凡是通過 new Function() 創(chuàng)建的對(duì)象都是函數(shù)對(duì)象,其他的都是普通對(duì)象。

f1,f2,歸根結(jié)底都是通過 new Function()的方式進(jìn)行創(chuàng)建的。

Function Object 也都是通過 New Function()創(chuàng)建的。

二. 構(gòu)造函數(shù)

我們先復(fù)習(xí)一下構(gòu)造函數(shù)的知識(shí): 

  1. function Person(name, age, job) {  
  2.  this.name = name;  
  3.  this.age = age;  
  4.  this.job = job;  
  5.  this.sayName = function() { alert(this.name) }   
  6.  
  7. var person1 = new Person('Zaxlct', 28, 'Software Engineer');  
  8. var person2 = new Person('Mick', 23, 'Doctor'); 

上面的例子中 person1 和 person2 都是 Person 的實(shí)例。這兩個(gè)實(shí)例都有一個(gè) constructor (構(gòu)造函數(shù))屬性,該屬性(是一個(gè)指針)指向 Person。 即: 

  1. console.log(person1.constructor == Person); //true  
  2.   console.log(person2.constructor == Person); //true 

我們要記住兩個(gè)概念(構(gòu)造函數(shù),實(shí)例):

person1 和 person2 都是 構(gòu)造函數(shù) Person 的實(shí)例

一個(gè)公式:

實(shí)例的構(gòu)造函數(shù)屬性(constructor)指向構(gòu)造函數(shù)。

三. 原型對(duì)象

在 JavaScript 中,每當(dāng)定義一個(gè)對(duì)象(函數(shù)也是對(duì)象)時(shí)候,對(duì)象中都會(huì)包含一些預(yù)定義的屬性。其中每個(gè)函數(shù)對(duì)象都有一個(gè)prototype 屬性,這個(gè)屬性指向函數(shù)的原型對(duì)象。 

  1. function Person() {}  
  2. Person.prototype.name = 'Zaxlct' 
  3. Person.prototype.age  = 28 
  4. Person.prototype.job  = 'Software Engineer' 
  5. Person.prototype.sayName = function() {  
  6.   alert(this.name);  
  7.  
  8. var person1 = new Person();  
  9. person1.sayName(); // 'Zaxlct'  
  10. var person2 = new Person();  
  11. person2.sayName(); // 'Zaxlct'  
  12. console.log(person1.sayName == person2.sayName); //true 

我們得到了本文第「定律」:

1.每個(gè)對(duì)象都具有一個(gè)名為__proto__的屬性;

2.每個(gè)構(gòu)造函數(shù)(構(gòu)造函數(shù)標(biāo)準(zhǔn)為大寫開頭,如Function(),Object()等等JS中自帶的構(gòu)造函數(shù),以及自己創(chuàng)建的)都具有一個(gè)名為prototype的方法(注意:既然是方法,那么就是一個(gè)對(duì)象(JS中函數(shù)同樣是對(duì)象),所以prototype同樣帶有__proto__屬性);

3.每個(gè)對(duì)象的__proto__屬性指向自身構(gòu)造函數(shù)的prototype;

4.每個(gè)對(duì)象都有 、__proto__ 屬性,但只有函數(shù)對(duì)象才有 prototype 屬性

四. 原型鏈

原型對(duì)象其實(shí)也是普通的對(duì)象。幾乎所有的對(duì)象都可能是原型對(duì)象,也可能是實(shí)例對(duì)象,而且還可以同時(shí)是原型對(duì)象與實(shí)例對(duì)象。這樣的一個(gè)對(duì)象,正是構(gòu)成原型鏈的一個(gè)節(jié)點(diǎn)。因此理解了原型,那么原型鏈并不是一個(gè)多么復(fù)雜的概念。

我們知道所有的函數(shù)都有一個(gè)叫做toString的方法。那么這個(gè)方法到底是在哪里的呢?

先隨意聲明一個(gè)函數(shù): 

  1. function add() {} 

那么我們可以用如下的圖來表示這個(gè)函數(shù)的原型鏈。

原型鏈

其中add是Function對(duì)象的實(shí)例。而Function的原型對(duì)象同時(shí)又是Object原型的實(shí)例。這樣就構(gòu)成了一條原型鏈。原型鏈的訪問,其實(shí)跟作用域鏈有很大的相似之處,他們都是一次單向的查找過程。因此實(shí)例對(duì)象能夠通過原型鏈,訪問到處于原型鏈上對(duì)象的所有屬性與方法。這也是foo最終能夠訪問到處于Object原型對(duì)象上的toString方法的原因。

基于原型鏈的特性,我們可以很輕松的實(shí)現(xiàn)繼承。

具體基本知識(shí)了解后,我們分析下圖:

***

先從實(shí)例add()分析

實(shí)例add() 為 Function的實(shí)例

所以

add()的__proto__指向其構(gòu)造函數(shù)的原型即 Function.prototype 

  1. var add = function () {}  
  2. add.__proto__ === Function.prototype//true 

特別注意 構(gòu)造函數(shù)Funciton的__proto__指向自身的Function.prototype 

  1. Function.__proto__ === Function.prototype//true 

所以構(gòu)造函數(shù)Function的__proto__和prototype都指向Function.prototype

第二

因?yàn)镕unction和Object都是js自帶函數(shù)

且 Object 也是由 new Function創(chuàng)建而來 

  1. typeof Function  
  2. "function"  
  3. typeof Object  
  4. "function" 

所以 Object的__proto__指向Function的原型對(duì)象即 Function.prototype 

  1. Object.__proto__ === Function.prototype  
  2. true 

因此 Object 的 prototype 和 Function.prototype的 __proto__都指向 Object.prototype

第三

Object.prototype被稱為原型鏈的E端,因?yàn)樗腳_proto__為null

責(zé)任編輯:龐桂玉 來源: segmentfault
相關(guān)推薦

2020-10-20 08:35:34

JS基礎(chǔ)進(jìn)階

2020-09-10 07:04:30

JSJavaScript 原型鏈

2020-02-20 14:00:15

JavaScript原型原型鏈

2017-05-05 10:31:35

JavaScriptprototype__proto__

2017-04-07 11:15:49

原型鏈原型Javascript

2022-06-20 09:22:55

js原型鏈前端

2023-08-28 07:12:54

2022-05-26 09:20:01

JavaScript原型原型鏈

2022-05-26 23:14:26

原型原型鏈JS繼承

2016-06-07 14:28:39

Javascript原型

2012-01-05 15:07:11

JavaScript

2023-04-07 09:07:11

2012-11-08 10:40:47

JavaScript原型鏈

2012-12-13 11:01:42

IBMdW

2022-03-29 09:15:55

Javascript函數(shù)屬性

2016-05-06 14:02:18

JavaScript原型鏈

2024-08-09 12:44:45

JavaScript原型鏈鏈條

2021-05-10 06:11:24

前端原型鏈污染漏洞服務(wù)器shell

2022-04-14 20:43:24

JavaScript原型鏈

2011-08-24 13:51:56

JavaScript
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)