- 繼承有什么作用? （難度:3*）
- 繼承可以使一個(gè)對(duì)象直接使用另一個(gè)對(duì)象的屬性和方法。
- 有幾種常見(jiàn)創(chuàng)建對(duì)象的方式? 舉例說(shuō)明? （難度:4*）
- 有4中常見(jiàn)的創(chuàng)建對(duì)象方式：普通模式、工廠模式、構(gòu)造函數(shù)模式、原型模式。
1?普通模式
Plople = {
name： ‘yangran',
sex: 'male',
sayName: function(){
console.log('My name is:' + this.name);
}
}
2工廠模式
function Plople(name, sex){
var obj = {};
obj.name = name;
obj.sex = sex;
obj.sayName = function(){
console.log('My name is:' + this.name);
}
return obj;
}
var p1 = Plople('yangran1', 'male');
var p2 = Plople('yangran2', 'male');
3構(gòu)造函數(shù)模式
function Plople(name, sex){
this.name = name;
this.sex = sex;
this.sayName = function(){
console.log('My name is:' + this.name);
}
}
var p1 = new Plople('yangran1', 'male');
var p2 = new Plople('yangran2', 'male');
4原型模式
function Plople(name, sex){
this.name = name;
this.sex = sex;
}
Plople.prototype.sayName = function(){
console.log('My name is:' + this.name);
}
var p1 = new Plople('yangran1', 'male');
var p2 = new Plople('yangran2', 'male');
- 下面兩種寫(xiě)法有什么區(qū)別? （難度:3*）
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('饑人谷', 2)
//方法2
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
- 創(chuàng)建對(duì)象的模式不同：方法1為構(gòu)造函數(shù)模式，方法2為原型模式；
- printName對(duì)象方法的定義方式不同：
方法1的printName方法定義在構(gòu)造函數(shù)內(nèi)部，屬于構(gòu)造函數(shù)特有的；
方法2的printName方法定義在構(gòu)造函數(shù)的原型(prototype)上，可以被new Person()所創(chuàng)建的實(shí)例對(duì)象共享。 - Object.create有什么作用？兼容性如何？如何使用？ （難度:3*）
-
Object.create()方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。Object.create(proto,[ propertiesObject ]),第一個(gè)參數(shù)作為所創(chuàng)建對(duì)象的原型，第二個(gè)參數(shù)是一組屬性與值為所創(chuàng)建對(duì)象的屬性與值。
瀏覽器兼容性
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log('My name is:' + this.name);
}
function Male(sex){
this.sex = sex;
Person.call(this, name, age);//在Male實(shí)例對(duì)象下
}
//Male.prototype = Person.prototype;//方法1但會(huì)使Person也具備了Male的方法,不推薦
Male.prototype = Object.create(Person.prototype);//創(chuàng)建一個(gè)空對(duì)象使Person.prototype為Male.prototype的原型，Male.prototype.__proto__ === Person.prototype為true
Male.constructor = Male;//創(chuàng)建的新對(duì)象constructor指向?yàn)镺bject，這里進(jìn)行指向更改
Male.prototype.sayAge = function(){//給創(chuàng)建的新對(duì)象里添加方法
console.log('age:' + this.sex);
}
//Male.prototype = new Person//方法3兼容環(huán)境
- Object.create方法的封裝
function inherit(superType, subType){
var _prototype = Object.create(superType.prototype);
_prototype.constructor = subType;
subType.prototype = _prototype;
}//superType為需要被繼承方法的對(duì)象，subType為需要去繼承方法的對(duì)象
inherit(Person, Male);
- hasOwnProperty有什么作用？ 如何使用？ （難度:3*）
- hasOwnPerperty是Object.prototype的一個(gè)方法，可以判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性。
var Obj = {
name: name,
sayName:function(){
console.log(this.name)
}
}
Obj.hasOwnProperty('sayName')//true
Obj.hasOwnProperty('toString')//false
Obj.hasOwnProperty('name')//true
hasOwnProperty
在上例中可以看出，sayName方法與name屬性都是Obj本身自帶的屬性hasOwnProperty判斷為true，而toString方法是繼承于原型鏈上Object對(duì)象上的方法hasOwnProperty判斷為false。
- 實(shí)現(xiàn)Object.create的 polyfill，如:（ps: 寫(xiě)個(gè) 函數(shù)create，實(shí)現(xiàn) Object.create 的功能) （難度:4*）
var obj = {a: 1, b:2};
var obj2 = create(obj);
function create(obj){
if(typeof Object.create === 'function'){
return Object.create(obj);
} else {
function fn(){}
fn.prototype = obj;
newObj = new fn();
}
return newObj;
}
console.log(obj2.a); //1
- 如下代碼中call的作用是什么? （難度:4*）
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex); //這里的 call 有什么作用
this.age = age;
}
-
這里的 call 表示在Male構(gòu)造函數(shù)的環(huán)境下使用Person構(gòu)造函數(shù)下的name、sex屬性，也就是在通過(guò)new Male()創(chuàng)建的實(shí)例對(duì)象可以傳遞name、sex參數(shù)，在Male構(gòu)造函數(shù)下創(chuàng)建Person構(gòu)造函數(shù)下的name和sex屬性。
- 補(bǔ)全代碼，實(shí)現(xiàn)繼承 （難度:4*）
function Person(name, sex){
// todo ...
}
Person.prototype.getName = function(){
// todo ...
};
function Male(name, sex, age){
//todo ...
}
//todo ...
Male.prototype.getAge = function(){
//todo ...
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log(this.name);
};
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.getAge = function(){
console.log(this.age);
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
代碼
- 實(shí)現(xiàn)如下dialog 彈窗功能， 參考效果 （難度:*****）
//功能描述：
// 1. 可使用 dialog.open() 去打開(kāi)彈窗
// 2. 當(dāng)點(diǎn)擊確定、取消時(shí)可使用用戶自定義事件
// 3. dialog 可拖動(dòng)
// 4. 允許頁(yè)面展示多個(gè) dialog
function Dialog(){
//todo ...
}
var tpl = '<ul><li>列表1</li><li>列表2</li><li>列表1</li><li>列表1</li></ul>';
$('#open4').on('click',function(){
var dialog4 = new Dialog();
dialog4.open({
title: '歡迎來(lái)到饑人谷',
message: tpl,
isShowCloseBtn: true,
isShowConfirmBtn: true,
onClose: function(){
alert('close')
},
onConfirm: function(){
alert('確定');
}
});
});
代碼1
本博客版權(quán)歸 本人和饑人谷所有，轉(zhuǎn)載需說(shuō)明來(lái)源
