JavaScript原型Prototype詳情
1、概述
1.1原型是什么
在JavaScript中，函數(shù)是一個包含屬性和方法的Function類型的對象。而原型（Prototype ）就是Function類型對象的一個屬性。
在函數(shù)定義是包含了prototype屬性，它的初始值是一個空對象 。在JavaScript中并沒有定義函數(shù)的原始類型，所以原型可以是任何類型。
原型是用于保存對象的共享屬性和方法的，原型的屬性和方法并不會影響函數(shù)本身的屬性和方法。
示例代碼驗證如下：
function fun() {
console.log('函數(shù)原型')
}
console.log(fun.prototype) // {}
fun.prototype返回的也是一個空對象，但是這不說明Object.prototype中沒有屬性或者方法，這些屬性和方法為不可枚舉的，示例代碼如下所示：
function fun() {
console.log('函數(shù)原型')
}
console.log(fun.prototype) // {}
// 通過 Object.getOwnPropertyNames() 獲取全部屬性
console.log(Object.getOwnPropertyNames(fun.prototype)) // [ 'constructor' ]
其中，constructor屬性指向該構造函數(shù)的引用，代碼如下：
// constructor屬性 console.log(fun.prototype.constructor) // [Function: fun] console.log(fun.prototype.constructor === fun) // true
1.2獲取原型
了解了原型的概念以及作用之后，我們需要獲取到原型才能對其進行操作，在JavaScript中獲取原型的方式有兩種，如下所示：
通過構造函數(shù)的prototype屬性。
通過Object.getPrototypeOf(obj)方法。
這兩個的區(qū)別就是構造函數(shù)的prototype屬性一般只配合構造函數(shù)使用，而Object.getPrototypeOf(obj)方法一般是獲取構造函數(shù)實例化后的對象的原型方法。
實例代碼如下：
// 構造函數(shù)
function Person(name) {
this.name = name
}
// 指向構造函數(shù)的原型
var p1 = Person.prototype
var person = new Person('一碗周')
// 指向構造函數(shù)的原型
var p2 = Object.getPrototypeOf(person)
console.log(p1 === p2) // true
獲取原型后可以跟操作對象似的進行操作，因為原型本身就是一個對象。
2、原型屬性
在JavaScript中，函數(shù)本身也是一個包含了方法和屬性的對象。接下將學習函數(shù)對象的另一個屬性——prototype,這個屬性的初始值是一個空對象。
2.1利用原型添加屬性與方法。
為對象添加屬性和方法的另一種用法就是通過原型為其添加。當為一個構造函數(shù)添加原型屬性和原型方法時，通過該構造函數(shù)new出的所有對象共享該屬性和方法。
PS：所謂的原型屬性或者原型方法就是通過原型添加的屬性或者方法。
添加屬性和方法的方式具有如下幾種方式
直接為其增加屬性或者方法
通過Object.defineProperty()方法，添加屬性或者方法。這種方式比第一種方式更具有安全性。
直接添加對象到原型。
示例代碼如下所示：
//構造函數(shù)
function Fun() {}
//直接為構造函數(shù)添加屬性和方法
Fun.prototype.str = '這是一個字符串'
Fun.prototype.fn = function () {
console.log('這是一個方法')
}
//通過 defineProperty 添加屬性或者方法
Object.defineProperty(Fun.prototype, 'MyFun', {
value: function () {
console.log('this is MyFun')
},
})
//測試
console.log(Fun.prototype.str)
Fun.prototype.fn()
Fun.prototype.MyFun()
var fun = new Fun()
fun.MyFun()
//直接為其定義個對象覆蓋到之前的原型上
Fun.prototype = {
name: '一碗周',
fun: function () {
console.log('this is function')
},
}
Fun.prototype.fun()
var fun = new Fun()
fun.fun()
2.2訪問原型屬性原型方法
對于原型來說，最重要的一點就是它的實時性 。由于在JavaScript中，幾乎所有的對象都是通過傳引用的方式來傳遞的，因此我們所創(chuàng)建的的每個新對象實體中并沒有一份屬于自己的原型副本。這就意味著我們隨時修改prototype屬性，并且由同一構造器創(chuàng)建的所有對象的prototype屬性也都會同時改變，包括我們之間通過構造器創(chuàng)建的屬性和方法。
還是上面那段代碼我們向原型中添加一個新方法，并調(diào)用，示例代碼如下所示：
Fun.prototype.fn = function () {
console.log('這是一個方法')
}
fun.fn() //這是一個方法
我們之前創(chuàng)建的對象可以訪問新加的原型屬性和原型方法。
3、自有屬性與原型屬性
我們先來創(chuàng)建一個構造函數(shù)，并為其添加兩個原型屬性。
//構造函數(shù)
function Fun() {}
//添加原型屬性和方法
Fun.prototype.name = '一碗粥'
Fun.prototype.print = function () {
console.log('this is function')
}
在通過該構造函數(shù)創(chuàng)建一個對象，為其設置屬性和方法
//通過構造函數(shù)創(chuàng)建對象
var fun = new Fun()
//為對象添加屬性和方法
fun.name = '一碗周'
fun.SayMe = function () {
console.log('this is SayMe')
}
現(xiàn)在我們的fun對象，擁有自有屬性/方法兩個，原型屬性/方法兩個。我們依次來訪問這些屬性和方法。
//訪問屬性和方法 console.log(fun.name) // 一碗周 fun.SayMe() // this is SayMe fun.print() // this is function
當我們訪問name屬性時，JavaScript引擎會遍歷fun這個對象的所有屬性，并返回name屬性的值。SayMe()方法也是樣的道理。但是到print()方法時，JavaScript引擎還是會遍歷這個對象所有屬性，這時就找不到一個叫print()方法了，接下來JavaScript引擎就會訪問創(chuàng)建當前對象的構造器函數(shù)的原型，也就是我們的Fun.prototype，如果其中有該屬性，則立即返回，否則返回undefined或者拋出異常
結論：當有自有屬性時，優(yōu)先訪問自有屬性，訪問完自有屬性再去訪問原型屬性 。
3.1檢測自有屬性或者原型屬性
現(xiàn)在已經(jīng)知道自有屬性和原型屬性的概念以及用途了，但是我們怎么知道一個屬性時自由屬性還是原有屬性，JavaScript中提供以下兩種方式來檢測一個屬性的情況
使用Object.prototype.hasOwnProperty(prop)方法來檢測prop屬性是否是自由屬性，該方法返回一個布爾值，如果是自有屬性則返回true，否則返回false。
來使用in關鍵字來檢測對象以及原型鏈中是否具有指定屬性。
測試代碼如下:
// 通過Object.prototype.hasOwnProperty(prop)方法檢測是否為自有屬性
console.log(fun.hasOwnProperty('name')) // true
console.log(fun.hasOwnProperty('print')) // false
// 如果一個不存在的屬性檢測結果也是為false
console.log(fun.hasOwnProperty('SayMe')) // true
// 通過 in 運算符
console.log('name' in fun) // true
console.log('print' in fun) // true
console.log('SayMe' in fun) // true
通過測試我們發(fā)現(xiàn)，這兩個方法并不能檢測一個屬性是不是一個自有屬性或者原型屬性，但是將這兩個方法結合起來就可以檢測是自有屬性還是原型屬性了，
示例代碼如下：
function DetectionAttributes(obj, attr) {
if (attr in obj) {
if (obj.hasOwnProperty(attr)) {
// 如果是自有屬性屬性返回1
return 1
} else {
// 如果是原型屬性返回0
return 0
}
} else {
// 沒有這個屬性返回 -1
return -1
}
}
測試如下：
console.log(DetectionAttributes(fun, 'name')) // 1
console.log(DetectionAttributes(fun, 'print')) // 0
console.log(DetectionAttributes(fun, 'SayMe')) // 1
4、isPrototypeOf()方法
isPrototypeOf()方法用來檢測一個對象是否存在于另一個對象的原型鏈中，如果存在就返回true，否則就返回false。
實例代碼如下所示：
// 定義一個對象，用于賦值給原型對象
var obj = function () {
this.name = '一碗周'
}
var Hero = function () {} // 定義構造函數(shù)
// 將定義的對象賦值給構造函數(shù)的原型
Hero.prototype = obj
// 通過Hero創(chuàng)建對象
var hero1 = new Hero()
var hero2 = new Hero()
// 判斷創(chuàng)建的兩個對象是否在 obj 的原型鏈中
console.log(obj.isPrototypeOf(hero1)) // true
console.log(obj.isPrototypeOf(hero2)) // true
5、擴展內(nèi)置對象
JavaScript中的內(nèi)置對象有些也具prototype屬性，利用內(nèi)置對象的prototype屬性可以為內(nèi)置對象擴展屬性和方法。
通過原型擴展內(nèi)置對象的屬性和方法非常靈活，根據(jù)個性化要求制定JavaScript語言的具體內(nèi)容。
擴展內(nèi)置對象的方式有兩種，具體如下所示：
通過直接新增屬性和方法。
通過Object對象的defineProperty()方法為其新增屬性或者方法。這種方式會比第一種方式要好，是創(chuàng)建的屬性和方法更具有安全性
示例代碼如下所示：
// 為 Object 擴展屬性和方法
// 使用第一種方式
Object.prototype.MyPrint = function () {
console.log('this is MyPrint()')
}
// 使用第二種方式
Object.defineProperty(Object.prototype, 'MyInput', {
value: function () {
console.log('this is MyInput()')
},
})
// 調(diào)用
Object.prototype.MyPrint() // this is MyPrint()
Object.prototype.MyInput() // this is MyInput()
6、結語
這篇文章介紹了JavaScript中的原型的概念、原型屬性、如何檢測自有屬性和原型屬性以及如何擴展內(nèi)置對象
到此這篇關于JavaScript原型Prototype詳情的文章就介紹到這了,更多相關JavaScript原型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了使用pnpm包管理器替代npm及yarn的命令示例使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了JS原始類型為什么能調(diào)用方法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了微信小程序 條件渲染詳解的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了詳解微信小程序設置底部導航欄目方法的相關資料,需要的朋友可以參考下2017-06-06
微信小程序 滾動到某個位置添加class效果實現(xiàn)代碼
這篇文章主要介紹了微信小程序 滾動到某個位置添加class效果實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 textarea 組件詳解及簡單實例的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了lodash里的toLength和toPairs方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 定位到當前城市實現(xiàn)實例代碼的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS實現(xiàn)layui?table篩選框記憶功能,本案例放入本地緩存的方式，使用MutationObserver實現(xiàn)監(jiān)控點擊事件，需要的朋友可以參考下2022-01-01
遇到了一個郁悶的事：如果讓Http對象作全局變量，那么onreadystatechange只會在第一次執(zhí)行時觸發(fā)，以后都不會觸發(fā)這個事件了。 只好在每次Down文件時重新創(chuàng)建一個XmlHttp對象。2008-05-05