問答
- 繼承有什么作用?
繼承可以將另一個function上的prototype拷貝過來，當想做多個屬性的面包的時候會更加的方便，方法不用重復copy了。
- 有幾種常見創建對象的方式? 舉例說明?
"工廠模式"、“構造函數模式”、“原型模式”
工廠模式:
<script>
var person = function (name,age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.attribute = function (name) {
console.log("my name is "+ this.name);
console.log("my age is "+ this.age);
}
return obj;
}
var myself = new person("slr",21);
myself.attribute();
</script>
構造函數模式:
<script>
function Person(name, age){
this.name = name
this.age = age
this.attribute = function(){
console.log(this.name + this.age);
}
}
var myself = new Person("slr",21);
var myself2 = new Person("wby",20);
myself.attribute();
myself2.attribute();
</script>
構造函數是獨立的每個copy一份，雖然方法一樣，但是不是一個東西了
difference
原型模式:
<script>
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sayAttribute = function () {
console.log(this.name + this.age)
}
var p1 = new Person("slr",21);
p1.sayAttribute();
</script>
共用方法了
- 下面兩種寫法有什么區別?
//方法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);
方法一構造出來的每個方法和屬性都是獨立的，獨一份new出來。而方法二的屬性是每個獨一份的，但是方法是共用的，上面有解釋過了。
- Object.create 有什么作用？兼容性如何？如何使用？ （難度:***）
object.create(proto,[propertiesObject]) - 這是ES5新出的方法
- proto：指定的新創建對象的原型
- [propertiesObject]：可選參數，是對象的屬性描述符，里面可以添加一些自定義的屬性和方法。
兼容性：只兼容IE9+，Chrome5+，Firefox 4.0+，Opear 11.60+,Safari 5+
<script>
// 這是inherit
function inherit(a, b) {
var c = Object.create(a.prototype)
b.prototype = c;
c.constructor = b;
}
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayAttribute = function () {
console.log(this.name + this.age)
}
function PersonSecond(name, age, sex) {
Person.call(this, name, age);//這里的作用就是調用函數Person在PersonSecond函數內運行
this.sex = sex;
}
//這里
inherit(Person, PersonSecond);
Person.prototype.newSolution = function () {
console.log("PersonSecond sex "+ this.sex);
}
var p1 = new PersonSecond("slr", 21, "male");
p1.sayAttribute();
p1.newSolution();
</script>
- hasOwnProperty有什么作用？ 如何使用？ （難度:***）
hasOwnProperty可以得出對象是否有指定的名稱和屬性
uploaddddddddd.png
- 實現Object.create的 polyfill，如：（ps: 寫個 函數create，實現 Object.create 的功能)
function create(obj){
if(Object.create){
return Object.create(obj);
}else {
function show(){};
show.prototype=obj;
return new show();
}
}
var obj = {a: 1, b:2};
var obj2 = create(obj);
console.log(obj2.a); //1
用于確認函數的兼容性，如果兼容就可以就會執行。
<script>
if (typeof Object.create != 'function') {//首先判斷是否兼容
Object.create = (function () {
var Temp = function () {
};
return function (prototype) {
if (arguments.length > 1) {
return false;
}
if (prototype !== Object(prototype)) {
return false;
}
if (prototype === null) {
return false;
}
Temp.prototype = prototype;
var result = new Temp();
Temp.prototype = null;
return result;
};
})();
}
</script>
- 如下代碼中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;
}
上面有說過，這里的call是為了指向上一個函數，讓上一個函數在Male里面執行，以便獲得屬性。
- 補全代碼，實現繼承 （難度:****）
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();
<script>
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)//ES5的方法
Male.prototype.getAge = function () {
console.log(this.age)
};
Male.prototype.printName = function () {
console.log(this.getName())
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
</script>
CODE
- 實現如下dialog 彈窗功能， 參考效果
//功能描述：
// 1. 可使用 dialog.open() 去打開彈窗
// 2. 當點擊確定、取消時可使用用戶自定義事件
// 3. dialog 可拖動
// 4. 允許頁面展示多個 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: '谷',
message: tpl,
isShowCloseBtn: true,
isShowConfirmBtn: true,
onClose: function(){
alert('close')
},
onConfirm: function(){
alert('確定');
}
});
});
