1.如何準(zhǔn)確判斷一個變量是數(shù)組類型
2.寫一個原型鏈繼承的例子
3.描述new一個對象的過程
知識點#####
- 構(gòu)造函數(shù)
function Foo(name,age){
this.name=name
this.age=age
this.class='class-1'
//return this //默認(rèn)有這一行
}
var f=new Foo('zhangsan',20)
//var f1=new Foo('lisi',22) //創(chuàng)建多個對象
- 構(gòu)造函數(shù)-擴(kuò)展
var a={} //其實是var a=new Object()的語法糖
var b=[] //其實是var b=new Array()的語法糖
function Foo(){...} //其實是var Foo=new Function(...)
//使用instanceof判斷一個函數(shù)是否是一個變量的構(gòu)造函數(shù)
所有的引用類型(對象、數(shù)組、函數(shù))都有構(gòu)造函數(shù),a的構(gòu)造函數(shù)是Object(),b的構(gòu)造函數(shù)是Array(),F(xiàn)oo的構(gòu)造函數(shù)是Function()。所以假如想要判斷一個變量是否為數(shù)組就可以使用
var a={}
a instanceof Array //false
- 原型規(guī)則和實例
所有的引用類型都具有對象特性,即可自由擴(kuò)展屬性(null除外)
所有引用類型都有一個
__proto__ //隱式原型屬性,屬性值是一個普通的對象所有函數(shù)都有一個
prototype //顯示原型屬性,屬性值也是一個普通的對象所有引用類型的
__proto__屬性值指向它的構(gòu)造函數(shù)的prototype的屬性值-
當(dāng)試圖得到一個引用類型的某個屬性時,如果這個對象本身沒有這個屬性,那么會去它的
__proto__(即它構(gòu)造函數(shù)的prototype)中尋找var obj={};obj.a=100; var arr=[];arr.a=100; function fn(){} fn.a=100 console.log(obj.__proto__) console.log(arr.__proto__) console.log(fn.__proto__) console.log(fn.prototype) console.log(obj.__proto__===Object.prototype) //true
//構(gòu)造函數(shù)
function Foo(name,age){
this.name=name
}
Foo.prototype.alertName=function(){ //由于prototype是一個普通對象,所以也可以擴(kuò)展屬性
alert(this.name)
}
//創(chuàng)建實例
var f=new Foo('zhangsan')
f.printName=function(){
console.log(this.name)
}
//測試
f.printName() //zhangsan
f.alertName() //f沒有alertName屬性,于是去f._proto_即Foo.prototype中查找
由對象調(diào)用原型中的方法,this指向?qū)ο?/em>
//循環(huán)對象自身的屬性
var item
for(item in f){
//高級瀏覽器已在for in中屏蔽了來自原型的屬性
//但是這里建議還是加上這個判斷以保證程序的健壯性
if(f.hasOwnProperty(item)){
console.log(item)
}
}
- 原型鏈
//在剛剛的代碼中加入
f.toString() //要去f.__proto__.__proto__中查找
所有的引用類型都有__proto__屬性,且__proto__屬性值指向它的構(gòu)造函數(shù)的prototype的屬性值,所以當(dāng)f不存在toString時,便會在f.__proto__即Foo.prototype中查詢,而Foo.prototype中也沒有找到toString。由于Foo.prototype也是一個對象,所以它隱式原型__proto__的屬性值便指向它的構(gòu)造函數(shù)Object的prototype的屬性值。
//試一試
console.log(Object.prototype)
console.log(Object.prototype.__proto__) //為了避免死循環(huán),所以此處輸出null

- instanceof
用于判斷引用類型屬于哪個構(gòu)造函數(shù)的方法
f instanceof Foo的判斷邏輯是f的__proto__一層層向上能否對應(yīng)到Foo.prototype,再試著判斷f instanceof Object
解題#####
1.如何準(zhǔn)確判斷一個變量是數(shù)組類型
使用instanceof
var arr=[]
arr instanceof Array //true
typeof arr //object typeof無法準(zhǔn)確判斷是否是數(shù)組
2.寫一個原型鏈繼承的例子
//簡單示例,比較low,下面有更貼近實戰(zhàn)的例子
//動物
function Animal(){
this.eat=function(){
console.log('Animal eat')
}
}
//狗
function Dog(){
this.bark=function(){
console.log('Dog bark')
}
}
Dog.prototype=new Animal()
//哈士奇
var hashiqi=new Dog()
//封裝一個DOM查詢
function Elem(id){
this.elem=document.getElementById(id)
}
Elem.prototype.html=function(val){
var elem=this.elem
if(val){
elem.innerHTML=val
return this //鏈?zhǔn)讲僮? }else{
return elem.innerHTML
}
}
Elem.prototype.on=function(type,fn){
var elem=this.elem
elem.addEventListener(type,fn)
return this //鏈?zhǔn)讲僮?}
var div1=new Elem('div1')
// console.log(div1.html());
// div1.html('<p>Hello</p>');
// div1.on('click',function(){
// alert('clicked')
// });
div1.on('click',function(){alert('clicked')}).html('<p>鏈?zhǔn)讲僮?lt;/p>')
//在之前的函數(shù)中增加了return this,由div1調(diào)用時便會返回當(dāng)前對象,即div1,便可以實現(xiàn)鏈?zhǔn)讲僮?
3.描述new一個對象的過程
function Foo(name,age){
// this={}
this.name=name
this.age=age
this.class='class-1'
//return this
}
var f=new Foo('zhangsan',20)
//var f1=new Foo('lisi',22) //創(chuàng)建多個對象
創(chuàng)建一個新對象
this指向這個新對象 this={}
執(zhí)行代碼,即對this賦值 this.xxx=xxx
返回this return this