- 如何判斷一個(gè)變量是數(shù)組類型
- 寫一個(gè)原型鏈繼承的例子
- 描述new一個(gè)對(duì)象的過程
- zepto(或其他框架)源碼中如何使用原型鏈
構(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('greentea',20)
//var f1 = new Foo('lisi',22) //創(chuàng)建多個(gè)對(duì)象
在函數(shù)中,一般函數(shù)名大寫開頭的都是構(gòu)造函數(shù).這是一種規(guī)范.
那么f是如何變成一個(gè)對(duì)象的呢?
首先,在new之前,這個(gè)構(gòu)造函數(shù)中的this是一個(gè)空對(duì)象,在構(gòu)造函數(shù)穿參(或者不傳),依次將參數(shù)賦值給this的屬性,然后將這個(gè)this作為返回值,即使return this這一句沒有,它也默認(rèn)返回this.依次,這個(gè)f就這樣new出來的.
var a = {} 其實(shí)是var a = new Object()的語(yǔ)法糖
var a = [] 其實(shí)是var a = new Array()的語(yǔ)法糖
function Foo(){...}其實(shí)是var Foo = new Function(...)
使用instanceof判斷一個(gè)函數(shù)是否是一個(gè)變量的構(gòu)造函數(shù)
原型
1.所有的引用類型(數(shù)組,對(duì)象,函數(shù)),都具有對(duì)象特性,即可自由擴(kuò)展屬性(除了'null'以外)
2.所有的引用類型(數(shù)組,對(duì)象,函數(shù)),都有一個(gè)__proto__屬性,屬性值是一個(gè)普通的對(duì)象
3.所有的函數(shù),都有一個(gè)prototype屬性,屬性值也是一個(gè)普通的對(duì)象
4.所有的引用類型(數(shù)組,對(duì)象,函數(shù)),__proto__屬性值指向它的構(gòu)造函數(shù)的'prototype'屬性值
5.當(dāng)試圖得到一個(gè)對(duì)象的某個(gè)屬性時(shí),如果這個(gè)對(duì)象本身沒有這個(gè)屬性,那么會(huì)去它的__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);
//構(gòu)造函數(shù)
function Foo(name,age){
this.name = name
}
Foo.prototype.alertName = function(){
alert(this.name)
}
//創(chuàng)建示例
var f = new Foo('greentea');
f.printName = function(){
console.log(this.name)
}
//測(cè)試
f.printName()
f.alertName()
其中,
this指代的就是f,你從原型中繼承來的方法中里的this,它也指向f
循環(huán)對(duì)象自身的屬性
var item
for(item in f){
//高級(jí)瀏覽器已經(jīng)在for in中屏蔽了來自原型的屬性
//但是這里建議大家還是加上這個(gè)判斷,保證程序的健壯性
if(f.hasOwnProperty(item)){
console.log(item)
}
}
原型鏈
下面,接著看這個(gè)例子...
//構(gòu)造函數(shù)
function Foo(name,age){
this.name = name
}
Foo.prototype.alertName = function(){
alert(this.name)
}
//創(chuàng)建示例
var f = new Foo('greentea');
f.printName = function(){
console.log(this.name)
}
//測(cè)試
f.printName()
f.alertName()
f.toString() //要去f.__proto__.__proto__中查找
instanseof
用于判斷引用類型屬于哪個(gè)構(gòu)造函數(shù)的方法
f instanceof Foo 的判斷邏輯是:
f的proto一層一層往上,能否對(duì)應(yīng)到Foo.prototype
下面是一些例子
//動(dòng)物
function Animal(){
this.eat = function(){
console.log('animal eat');
}
}
//狗
function Dog(){
this.bark = function(){
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//薩摩
var samo = new Dog();
在這段代碼中,new 了Animal構(gòu)造函數(shù)的對(duì)象給了Dog.prototype,Dog.prototype的原型本來就是個(gè)對(duì)象,只是現(xiàn)在它又擁有了Animal的屬性.
//封裝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)
}
var div1 = new Elem('div1')
div1.html('<p>hello imooc</p>')
div1.on('click',function(){
alert('clicked')
})
