問題
1.繼承有什么作用?
- 繼承是指一個對象直接使用另一對象的屬性和方法。
- 作用：
1.當js中的兩個對象有很多的共性時，子對象的構(gòu)造函數(shù)沒必要重新實現(xiàn)父對象的共性，而可以采用繼承的方式，繼承父對象的屬性和方法，這樣子對象在擁有父對象的特性的同時，也可以對自己的特性進行擴充，實現(xiàn)了代碼的復用，程序的優(yōu)化，js中通過原型鏈來實現(xiàn)繼承。
2.用純js做一些復雜的工具或框架系統(tǒng)就要用到了，比如webgis、或者js框架如jquery、ext等，繼承可以減少代碼量，有利于維護代碼
2.有幾種常見創(chuàng)建對象的方式? 舉例說明?
字面量形式：
var obj={a:1,b:2}構(gòu)造函數(shù)方式，先創(chuàng)建一個構(gòu)造函數(shù)（有參數(shù)），通過new創(chuàng)建
function people(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
console.log('my name is',this.name)
}
}
var p1=new people('mike',20)工廠模式 ，通過return得到不同的對象返回值，但是得不到對象的類型
function createPeople(name,sex){
var obj={
name:name,
sex:sex,
sayName:function(){
console.log('my name is',this.name)
}
}
return obj
}
var p1=createPeople('nick','man')
var p2=createPeople('mary','woman')-
原型方式 ，在構(gòu)造函數(shù)內(nèi)部定義對象的屬性，在構(gòu)造函數(shù)的原型對象中定義公共的方法，節(jié)省代碼，優(yōu)化內(nèi)存
function createPeople(name,sex){ this.name=name; this.sex=sex; } createPeople.prototype.sayName=function(){ console.log('my name is '+this.name) } var p1= new createPeople('nick','man') p1.sayName() var p2= new createPeople('mary','woman') p2.sayName()
3.下面兩種寫法有什么區(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);
- 方法1，使用的是構(gòu)造函數(shù)的模式，這種方法創(chuàng)建對象的屬性和方法都是在構(gòu)造函數(shù)的內(nèi)部創(chuàng)建并執(zhí)行，無法實現(xiàn)繼承和擴展，每次創(chuàng)建都要重新執(zhí)行函數(shù)，重復創(chuàng)造消耗空間和性能，
- 方法2，使用的原型方式，將對象共有的方法printName在構(gòu)造函數(shù)的原型中定義，這樣每次創(chuàng)建對象時，printName方法不會重復創(chuàng)建，當創(chuàng)造對象時，直接調(diào)用原型對象中保存的方法，實現(xiàn)了繼承，便于擴展，有利于代碼簡潔，性能的優(yōu)化
4.Object.create有什么作用？兼容性如何？如何使用？
Object.create() 方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象。
兼容性：IE9+,Chrome5+,Firfox4.0+,Opera11.60+,Safari5+
-
使用Object.create()來實現(xiàn)類式繼承,語法：
Object.create(*proto,* [ *propertiesObject* ]),將創(chuàng)建的原型對象賦值到新函數(shù)的原型，實現(xiàn)繼承
// 構(gòu)造函數(shù)
function people(name,sex){
this.name=name;
this.sex=sex;
}
people.prototype.printName=function(){
console.log('my name is '+this.name)
}
function student(name,sex,grade){
people.call(this,name,sex)
this.grade=grade;
}
//Object.create來使student繼承people的方法
function inherit(parent,child){
var _prototype=Object.create(parent.prototype)
_prototype.constructor=child;
child.prototype=_prototype;
}
inherit(people,student)student.prototype.study=function(){ console.log(this.name+'是'+this.grade+'學生') } var p1=new student('nick','man','三年級'); p1.printName(); p1.study();
5.hasOwnProperty有什么作用？ 如何使用？
hasOwnProperty()方法用來判斷某個對象是否含有指定的自身屬性。
所有繼承了 Object.prototype的對象都會從原型鏈上繼承到 hasOwnProperty 方法，這個方法可以用來檢測一個對象是否含有特定的自身屬性，和 運算符不同，該方法會忽略掉那些從原型鏈上繼承到的屬性。
-
使用 hasOwnProperty方法判斷某對象是否含有特定的自身屬性
var obj={};
obj.name="nick";
function test() {
obj.newName=obj.name;
delete obj.name;
}obj.hasOwnProperty('name');//true test(); obj.hasOwnProperty('name');//false obj.hasOwnProperty('newName');//true hasOwnProperty 方法對待自身屬性和繼承屬性的區(qū)別
var obj=new Object();
obj.name="mike";//自身屬性
obj.hasOwnProperty('name')//true
obj.hasOwnProperty('toString')//false,繼承Object的屬性
obj.hasOwnProperty('hasOwnProperty')//false,繼承Object的屬性如果一個對象擁有自己的 hasOwnProperty方法, 則原型鏈上的同名方法會被遮蔽（shadowed）
var foo={
hasOwnProperty:function () {
return false
},
name:'nick'
}
foo.hasOwnProperty('name')//false,因為一直調(diào)用了obj的hasownProperty
//解決方法，直接使用原型鏈的真正的hasOwnProperty
({}).hasOwnProperty.call(foo, 'bar'); //true,請在控制臺直接操作，不然會報錯
Object.prototype.hasOwnProperty.call(foo,'name')//true-
遍歷一個對象的所有自身屬性
var buz = {
fog: 'stack'
};for (var name in buz) { if (buz.hasOwnProperty(name)) { alert("this is fog (" + name + ") for sure. Value: " + buz[name]); } else { alert(name); // toString or something else } }
6.實現(xiàn)Object.create的 polyfill
- 一個shim是一個庫,它將一個新的API引入到一個舊的環(huán)境中,而且僅靠舊環(huán)境中已有的手段實現(xiàn)
- 一個polyfill就是一個用在瀏覽器API上的shim.我們通常的做法是先檢查當前瀏覽器是否支持某個API,如果不支持的話就加載對應的polyfill.然后新舊瀏覽器就都可以使用這個API了
function create(obj){
function temp(){};
var newObj=(function(obj){
if(typeof obj!='object'){
throw TypeError('Object prototype may only be an Object or null')
}
temp.prototype=obj;
var prot=new temp();
temp.prototype=null;
return prot
})(obj)
return newObj;
}
var obj={a:1,b:2}
var obj2=create(obj)
console.log(obj2.a)
7.如下代碼中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方法執(zhí)行一個函數(shù)，傳入執(zhí)行期上下文和函數(shù)的參數(shù)，把this的作用域指向了person，在Male函數(shù)下執(zhí)行person（name,sex）,因此也繼承了person的name和sex屬性
8.補全代碼，實現(xiàn)繼承
function Person(name, sex){
this.name=name;
this.sex=sex;
}
Person.prototype.getName = function(){
return this.name
};
function Male(name, sex, age){
Person.call(this,name,sex)
this.age=age
}
var _prototype=Object.create(Person.prototype);
_prototype.constructor=Male;
Male.prototype=_prototype;
Male.prototype.printName=function(){
console.log('name is '+this.name)
}
Male.prototype.getAge = function(){
return this.age
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();//name is 若愚
代碼題
實現(xiàn)如下dialog 彈窗功能， 參考效果
代碼預覽
效果預覽 由于作業(yè)上傳上去GitHub上有，班級預覽項目沒有？使用了jsbin預覽
- 小結(jié)：發(fā)現(xiàn)鼠標的拖拽效果不寫data緩存數(shù)據(jù)也能實現(xiàn)。
