首頁 > web前端 > js教程 > js原型使用詳解

js原型使用詳解

php中世界最好的语言
發布: 2018-05-24 11:00:27
原創
2168 人瀏覽過

這次帶給大家js原型使用詳解,js原型使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

什麼是原型?

javascript 中原形是一個對象,透過原形可以實現屬性的繼承。

1

2

3

4

5

6

7

8

    let personBase = new Object()

    personBase.gender = '男'

    let animal = {

        eyeNumber: 2

    }

    let time = function () {

        let timeType = 'seconds'

    }

登入後複製

上面創建了三個對象,他們可以作為任何函數的原形。

1

2

3

4

5

6

7

function Person (age) {

  this.age = age

}

Person.prototype = personBase

let tom = new Person(18)

console.log(tom.age) // 18

console.log(tom.gender) // '男'

登入後複製

personBasePerson的原形。所以建構子##PersonpersonBase繼承了gender屬性

原形: 每一個JavaScript 物件(假設為A ,null除外)在創建的時候就會與之關聯另一個對象,這個對象就是我們所說的原型,每一個對像都會從原型"繼承"屬性。

A,在大多數編碼情境中可能是函數。函數預設都繼承於
Function, 即Function預設是所有函數的原形。當我們透過prototype屬性為函數新增一個原形物件時,該原形物件會加入到原形鏈的端。當然A也可以是其他資料型別(Number、String、Array、Boolean),例如Number 類型,當我們透過字面量方式(var a = 1)初始化變數等同於透過建構函數方式實例化一個變數(var a = new Number(1)),也就是字面量方式建立的變數同樣是Number的實例。所以我們可以透過Numberprototype屬性來實現屬性和方法的繼承。 (當然不建議這麼做)
建構子、實例、原型之間的關係

弄清楚這三者之間的關係關鍵是理解

prototypeproto<a href="http://www.php.cn/code/8201.html" target="_blank"></a>、constructor 之間的連結:

##屬性prototype##protoconstructor原型屬性,指向建構子

在JavaScript中,每个函数都有一个prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(设置实例的proto属性),也就是说,所有实例的原型引用的是构造函数的prototype属性。同时在原型对象中,包含一个"constructor"属性,这个属性对应创建所有指向该原型的实例的构造函数(有点拗口,就是constructor属性指向构造函数)。这三者的关系可以用下面的示例图表示:

js原型使用詳解

所以构造函数通过 prototype 属性指向自己的原型。 构造函数的实例在创建后通过 proto 属性指向构造函数的 prototype 的对象,即实例函数也指向原型。构造函数和实例都通过属性指向了原形。

代码示例:

1

2

3

4

5

    function Person () {}

    let manPerson = new Person()

    manPerson.proto === Person.prototype // true

    Person.prototype.constructor === Person // true

    manPerson.constructor === Person.prototype.constructor // true

登入後複製
  • manPerson是构造函数Person的实例

  • manPersonproto属性与Personprototype属性保存的值相等,即他们指向同一个对象原形

  • Person 的原形(Person.prototype)通过constructor属性指向 构造函数 Person ,即 Person和他的原形实现了相互引用

  • 实例的constructor属性与原形的constructor属性相等。这里实例的constructor属性是继承自原形的constructor属性。

反过来原型和构造函数是没有指向实例的引用,因为一个构造函数会有N个实例。javascript通过实例的  proto 属性来访问共同的原形。

所有函数都是 Function 构造函数的实例,而且函数也是一个对象
同时函数实例的字面量方式创建 function too(){} 等同于构造函数方式创建 let foo = new Function()

1

2

3

4

    foo instanceof Function // true

    too instanceof Function // true

    foo.proto === too.proto // true

    foo.proto === Function.prototype // true foo是Function的实例

登入後複製

所以too、foo都是Function的实例,他们的_proto指向的是Function构造函数的原型。

通过上面的示例代码分析,这里主要涉及到 prototypeprotoconstructor 这3个属性的关系。

我们再次梳理一下:

  • 对于所有的对象,都有proto属性,这个属性对应该对象的原型

  • 对于函数对象,除了proto属性之外,还有prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的proto属性)

  • 所有的原型对象都有constructor属性,该属性对应创建所有指向该原型的实例的构造函数

  • 函数对象和原型对象通过prototypeconstructor属性进行相互关联

所以上面的关系图其实可以于理解为:

js原型使用詳解


题外话:

1

    Function.prototype === Function.proto

登入後複製

先有鸡还是先有蛋?怎么 Function 作为构造函数 与 Function 作为实例对象的原型相等

在JavaScript中,Function构造函数本身也算是Function类型的实例吗?Function构造函数的prototype属性和proto属性都指向同一个原型,是否可以说Function对象是由Function构造函数创建的一个实例?
相关问题
JavaScript 里 Function 也算一种基本类型?
在JavaScript中,Function构造函数本身也算是Function类型的实例吗?

对于这类问题也可以不用深究。


constructor

原型的constructor属性指向对应的构造函数

1

2

3

    function Person() {

    }

    console.log(Person === Person.prototype.constructor); // true

登入後複製

原型链

当理解了原形的概念后,原形链就比较好理解了。

因為每個物件和原型都有原型,物件的原型指向物件的父,而父的原型又指向父的父,這種原型層層連接起來的就構成了原型鏈。 .JavaScript 物件透過proto指向原型物件的鏈。原形鏈的概念不難理解,當訪問一個對象的屬性時,它不僅僅在該對像上搜尋,還會搜尋該對象的原型,以及該對象的原型的原型,依次層層向上搜索,直到找到一個名字相符的屬性或到達原型鏈的結尾,找到就傳回該屬性的值否則就回傳undefind(原形鏈的末端是null)。

關於javascript 中各資料類型原形之間的關係可以參考下圖理解:

js原型使用詳解

#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

React-router v4使用步驟詳解

nodejs express設定自簽名https伺服器步驟詳解

#
-
函數屬性,指向原型
實例屬性,指向原型

以上是js原型使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板