106 js筆記9 js類和建構函式

2021-09-01 15:50:59 字數 2993 閱讀 4528

通過建構函式來定義

大駝峰命名法

通過new來呼叫

對比工廠法,不用手動建立物件和返回值

function person(name, age) 

}

**簡潔,識別物件的具體型別

每個物件都可以訪問乙個名稱叫做constructor的屬性, 屬性指向建立該例項的建構函式, 

通過constructor判斷乙個物件是否屬於某個類(p instanceof person或者p.constructor === person)

防止記憶體浪費和函式方法重名,可以把需要共享的函式定義到建構函式外部

// 將共享函式封裝到乙個物件中, 與外界隔絕, 這樣就不會汙染全域性命名空間了

var fns = ,

setname: function (name) ,

setage: function (age)

}function person(name, age)

var p1 = new person("jj", 33);

var p2 = new person("zs", 33);

console.log(p1.say === p2.say); // true

建構函式的優化方法

建構函式、例項、原型三者之間的關係()

當呼叫物件的屬性或者方法的時候,先去找物件本身的屬性/方法

如果物件沒有該屬性或者方法。此時去原型中查詢對應的屬性/方法

如果物件本身沒有該屬性/方法,原型中也沒有該屬性或者方法,此時會報錯

function person(name, age) 

// 給原型物件新增新的屬性和方法

person.prototype.say = function () ;

person.prototype.type = "人";

var p1 = new person("jj", 33);

var p2 = new person("zs", 33);

console.log(p1.say === p2.say); // true

console.log(p1.type === p2.type); // true

// 當呼叫物件的屬性或者方法的時候,先去找物件本身的屬性/方法

// 如果物件沒有該屬性或者方法。此時去原型中查詢對應的屬性/方法

// 如果物件本身沒有該屬性/方法,原型中也沒有該屬性或者方法,此時會報錯

p1.say();

console.log(p1.type);

原型鏈上方法呼叫
先查詢當前物件, 當前物件有就使用當前物件的方法

當前物件沒有再逐層在原型鏈上查詢, 最先找到那個就使用哪個

如果找到null都沒找到就報錯

function person(name, age) ;

} // 給原型物件新增新方法

person.prototype.say = function () ;

var p = new person("jj", 33);

// 自己有嗎? 有, 使用自己的

// 自己有嗎? 沒有, 去原型鏈查詢

// 都沒有嗎? 報錯

p.say();

結果:自己的 jj 33

原型鏈上屬性設定
先查詢當前物件, 當前物件有就使用當前物件的方法

當前物件沒有再逐層在原型鏈上查詢, 最先找到那個就使用哪個

如果找到null都沒找到就輸出undefined

function person(name, age) 

// 給原型物件新增新的屬性和方法

person.prototype.type = "人";

var p = new person("kk", 33);

// 自己有嗎? 有, 使用自己的

// 自己有嗎? 沒有, 去原型鏈查詢

// 都沒有嗎? undefined

console.log(p.type);

結果:超人

原型鏈上的屬性:_ _proto_ _(下劃線沒有空格)

原型鏈上的屬性不會改變,改變的只是物件的屬性

function person(name, age) 

// 給原型物件新增新的屬性和方法

person.prototype.type = "人";

var p = new person("kk", 33);

console.log(p.__proto__.type);

// p.__proto__.type = "超人";

// 自己有這個屬性嗎? 沒有, 新增

p.type = "超人";

console.log(p.__proto__.type);

console.log(p.type);

結果:人

人超人

自定義原型物件
原型物件是建構函式的乙個屬性, 所以我們可以通過修改屬性值的方式來自定義原型物件

function person(name, age) 

} person.prototype =

} var p = new person("lnj", 33);

p.say();

結果:lnj 33 人

原型物件使用建議
私有成員(一般就是非函式成員)放到建構函式中

共享成員(一般就是函式)放到原型物件中

如果重置了 prototype 記得修正 constructor 的指向

js高階 9 js操作表單知識點總結

elements和options i 陣列訪問方式,比如第i個,options i length blur focus select add remove checked 和 defaultchecked form 物件集合 form 物件屬性 form 物件方法 form 物件事件控制代碼 tex...

js學習筆記9

29.p190 超類與子類 function rectangle w,h 屬性方法 rectangle.prototype.area function rectangle.max function a,b function positionedrectangle x,y,w,h positioned...

JS筆記 9 關於this

1.給當前元素的某個事件繫結方法,當事件觸發方法執行的時候,方法中的this是當前操作的元素物件obox.onclick function 複製 2.普通函式執行,函式中的this取決於執行的主體,誰執行的,this就是誰 執行主體 方法執行,看方法名前面是否有 有的話,點前面是誰this就是誰,沒...