keywords: 繼承。
-
繼承有什么作用?
繼承可以使對(duì)象使用其他對(duì)象的屬性和方法蕾盯。例如Person朗若、Male、Female3個(gè)對(duì)象镰矿，可以使Male和Female繼承Person的屬性的方法，同時(shí)Male和Female又具有自己的獨(dú)特方法和屬性俘种，這樣可以減少代碼量秤标，優(yōu)化性能。
-
有幾種常見創(chuàng)建對(duì)象的方式? 舉例說(shuō)明?
有4中常見的創(chuàng)建對(duì)象方式：普通模式宙刘、工廠模式苍姜、構(gòu)造函數(shù)模式、原型模式悬包。
普通模式：
obj = {
name:'hello',
age:100,
sayName:function() {
console.log(this.name)
},
sayAge:function() {
console.log(this.age)
}
}
工廠模式：
function person(name,age) {
var obj = new Object()
obj.name = name
obj.age = age
obj.sayName = function() {
console.log(this.name)
}
obj.sayAge = function() {
console.log(this.age)
}
return obj
}
var p1 = person('hello',100)
var p2 = person('world',12)
構(gòu)造函數(shù)模式：
function Person(name,age) {
this.name = name
this.age = age
this.sayName = function() {
console.log(this.name)
}
this.sayAge = function() {
console.log(this.age)
}
}
var p1 = new Person('hello',100)
var p2 = new Person('world',12)
原型模式：
function Person(name,age) {
this.name = name
this.age = age
}
Person.prototype = {
this.sayName:function() {
console.log(this.name)
},
this.sayAge:function() {
console.log(this.age)
}
}
var p1 = new Person('hello',100)
var p2 = new Person('world',12)
-
下面兩種寫法有什么區(qū)別?
//方法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);
方法一屬于構(gòu)造函數(shù)模式衙猪，方法二屬于原型模式。
方法一的printName是定義p1上布近，此時(shí)的printName是p1獨(dú)有的垫释；而方法二的printName是定義在p1的原型上，此時(shí)的printName是所有實(shí)例共享的撑瞧。
-
Object.create 有什么作用棵譬？兼容性如何？如何使用预伺？
Object.create接受一個(gè)對(duì)象a作為參數(shù)订咸，并返回一個(gè)對(duì)象b曼尊。Object.create會(huì)將對(duì)象b的__proto__指向?qū)ο骯。
var a = {
print:function () {
console.log('hello')
}
}
var b = Object.create(a)
console.log(b.__proto__)
//Object{print:a.print()}
兼容性：
Object.create兼容性
-
hasOwnProperty有什么作用脏嚷？ 如何使用骆撇？
hanOwnProperty用于判斷某個(gè)屬性是否定義在對(duì)象自身,如果該存在且不再該對(duì)象上，則在原型鏈上然眼。
eg:
var obj = {
name:'hello',
age:100
}
console.log(!!obj.hasOwnProperty)
obj.hasOwnProperty('hasOwnProperty')
//true
//false
obj.hasOwnProperty('name')
//true
-
實(shí)現(xiàn)Object.create的 polyfill艾船，如：（ps: 寫個(gè) 函數(shù)create，實(shí)現(xiàn) Object.create 的功能)
function create(o) {
if (typeof Object.create !== 'function') {
function Fun() {}
Fun.prototype = o
return new Fun()
} else {
return Object.create(o)
}
}
var obj = {a: 1, b:2};
var obj2 = create(obj);
console.log(obj2.a); //1
-
如下代碼中call的作用是什么?
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex); //這里的 call 有什么作用
this.age = age;
}
//執(zhí)行Person函數(shù)高每，修改其中的this指向?qū)嵗龑?duì)象屿岂，并傳入兩個(gè)參數(shù)name和sex。
-
補(bǔ)全代碼鲸匿，實(shí)現(xiàn)繼承
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() 去打開彈窗
// 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('確定');
}
});
});
