成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

前端基礎進階:JS原型、原型鏈、對象

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

 一. 普通對象與函數對象

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

  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 為普通對象,f1 f2 f3 為函數對象。

怎么區分,其實很簡單,凡是通過 new Function() 創建的對象都是函數對象,其他的都是普通對象。

f1,f2,歸根結底都是通過 new Function()的方式進行創建的。

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

二. 構造函數

我們先復習一下構造函數的知識: 

  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 的實例。這兩個實例都有一個 constructor (構造函數)屬性,該屬性(是一個指針)指向 Person。 即: 

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

我們要記住兩個概念(構造函數,實例):

person1 和 person2 都是 構造函數 Person 的實例

一個公式:

實例的構造函數屬性(constructor)指向構造函數。

三. 原型對象

在 JavaScript 中,每當定義一個對象(函數也是對象)時候,對象中都會包含一些預定義的屬性。其中每個函數對象都有一個prototype 屬性,這個屬性指向函數的原型對象。 

  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.每個對象都具有一個名為__proto__的屬性;

2.每個構造函數(構造函數標準為大寫開頭,如Function(),Object()等等JS中自帶的構造函數,以及自己創建的)都具有一個名為prototype的方法(注意:既然是方法,那么就是一個對象(JS中函數同樣是對象),所以prototype同樣帶有__proto__屬性);

3.每個對象的__proto__屬性指向自身構造函數的prototype;

4.每個對象都有 、__proto__ 屬性,但只有函數對象才有 prototype 屬性

四. 原型鏈

原型對象其實也是普通的對象。幾乎所有的對象都可能是原型對象,也可能是實例對象,而且還可以同時是原型對象與實例對象。這樣的一個對象,正是構成原型鏈的一個節點。因此理解了原型,那么原型鏈并不是一個多么復雜的概念。

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

先隨意聲明一個函數: 

  1. function add() {} 

那么我們可以用如下的圖來表示這個函數的原型鏈。

原型鏈

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

基于原型鏈的特性,我們可以很輕松的實現繼承。

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

***

先從實例add()分析

實例add() 為 Function的實例

所以

add()的__proto__指向其構造函數的原型即 Function.prototype 

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

特別注意 構造函數Funciton的__proto__指向自身的Function.prototype 

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

所以構造函數Function的__proto__和prototype都指向Function.prototype

第二

因為Function和Object都是js自帶函數

且 Object 也是由 new Function創建而來 

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

所以 Object的__proto__指向Function的原型對象即 Function.prototype 

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

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

第三

Object.prototype被稱為原型鏈的E端,因為它的__proto__為null

責任編輯:龐桂玉 來源: segmentfault
相關推薦

2020-10-20 08:35:34

JS基礎進階

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

2023-08-28 07:12:54

2022-06-20 09:22:55

js原型鏈前端

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

2016-05-06 14:02:18

JavaScript原型鏈

2024-08-09 12:44:45

JavaScript原型鏈鏈條

2022-03-29 09:15:55

Javascript函數屬性

2021-05-10 06:11:24

前端原型鏈污染漏洞服務器shell

2011-08-24 13:51:56

JavaScript

2022-04-14 20:43:24

JavaScript原型鏈
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 成人黄色三级毛片 | 中文字幕在线人 | 日韩中文字幕一区二区 | 超碰成人免费 | 日韩欧美高清 | 久久久久久国产精品mv | 91操操操| 精品久久久久久久久久久久久久 | 成人羞羞国产免费视频 | 久久久精品日本 | 国产精品毛片一区二区在线看 | 91精品国产91久久久久久最新 | 99久热在线精品视频观看 | 午夜精品一区二区三区在线视频 | 韩国精品一区 | 亚洲精品中文字幕中文字幕 | 欧美精品三区 | 一区二区中文 | 欧美亚洲综合久久 | 天天夜夜人人 | 一级片片| 欧美一级免费黄色片 | 日本黄色片免费在线观看 | 99热.com | 亚洲精品综合 | 美女福利视频一区 | 精品亚洲一区二区三区四区五区 | 午夜三区 | 91久久国产综合久久 | 本道综合精品 | 精品成人在线视频 | 在线色网| 国内精品免费久久久久软件老师 | 日本不卡一区二区三区在线观看 | 91综合网| 日韩三级一区 | 91一区二区在线观看 | 久久综合一区二区 | 成年人在线电影 | 性高湖久久久久久久久3小时 | 亚洲一区在线免费观看 |