JS 建構函式與原型
阿新 • • 發佈:2022-02-23
1 建構函式
//建構函式 function Fn(name) { //新增例項成員-屬性 this.name=name //新增例項成員-方法 this.a=function () { console.log("例項成員"); } } //新增靜態成員-方法 Fn.b=function () { console.log("靜態成員"); } //新增原型方法 Fn.prototype.a=function () { console.log("原型方法a"); } Fn.prototype.b=function () { console.log("原型方法b"); } //例項化 - 建立物件 let test = new Fn('223') 例項成員可以通過例項化物件訪問 console.log(test.a) //例項成員 靜態成員只能由建構函式本身訪問 console.log(Fn.b) //靜態成員 原型通過例項化的物件訪問 console.log(test.b) //原型方法b
2 原型 (JS原型物件簡稱原型)
1 原型: 每個建構函式都有, 通過 函式名.prototype 可訪問 2 原型兩個預設屬性: `constrcutor`(構造器): 指向函式本身 `__proto__ `: 指向上一級(爸爸)的原型 3 原型: 包含所有例項*共享*的屬性和方法, (*共享* 每一個例項物件的屬性和方法不獨立, 不建立副本. 好處: 資料共享,節約資源) //fn的結構 function fn(name) { name=name a=function () { console.log("例項成員"); } } fn.prototype:{ 自己的方法與原型方法重名,優先自己的方法 a=function () { console.log("原型方法a"); } b=function () { console.log("原型方法b"); } constructor: ƒ fn(name) __proto__ } fn.prototype.__proto__: { 找不到本地方法,從原型鏈向上找 1. constructor: ƒ Object() 2. hasOwnProperty: ƒ hasOwnProperty() 3. isPrototypeOf: ƒ isPrototypeOf() 4. propertyIsEnumerable: ƒ propertyIsEnumerable() 5. toLocaleString: ƒ toLocaleString() 6. toString: ƒ toString() 7. valueOf: ƒ valueOf() }
3 原型鏈
1 用於查詢物件的屬性與方法, 有就用, 沒有undefined
2 優先順序: 非原型屬性方法 > 原型屬性方法 > 爸爸的原型屬性方法...
console.log(test.a) //例項成員
console.log(test.b) //原型方法b
3 建構函式的上一級是 Object , Object.prototype.\_\_proto__=unll