- 如何判断一个变量是数组类型
- 写一个原型链继承的例子
- 描述new一个对象的过程
- zepto(或其他框架)源码中如何使用原型链
构造函数
function Foo(name,age){
this.name = name
this.age = age
this.class = 'class-1'
//return this //默认有这一行
}
var f = new Foo('greentea',20)
//var f1 = new Foo('lisi',22) //创建多个对象
在函数中,一般函数名大写开头的都是构造函数.这是一种规范.
那么f是如何变成一个对象的呢?
首先,在new之前,这个构造函数中的this是一个空对象,在构造函数穿参(或者不传),依次将参数赋值给this的属性,然后将这个this作为返回值,即使return this这一句没有,它也默认返回this.依次,这个f就这样new出来的.
var a = {} 其实是var a = new Object()的语法糖
var a = [] 其实是var a = new Array()的语法糖
function Foo(){...}其实是var Foo = new Function(...)
使用instanceof判断一个函数是否是一个变量的构造函数
原型
1.所有的引用类型(数组,对象,函数),都具有对象特性,即可自由扩展属性(除了'null'以外)
2.所有的引用类型(数组,对象,函数),都有一个__proto__属性,属性值是一个普通的对象
3.所有的函数,都有一个prototype属性,属性值也是一个普通的对象
4.所有的引用类型(数组,对象,函数),__proto__属性值指向它的构造函数的'prototype'属性值
5.当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的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);
//构造函数
function Foo(name,age){
this.name = name
}
Foo.prototype.alertName = function(){
alert(this.name)
}
//创建示例
var f = new Foo('greentea');
f.printName = function(){
console.log(this.name)
}
//测试
f.printName()
f.alertName()
其中,
this指代的就是f,你从原型中继承来的方法中里的this,它也指向f
循环对象自身的属性
var item
for(item in f){
//高级浏览器已经在for in中屏蔽了来自原型的属性
//但是这里建议大家还是加上这个判断,保证程序的健壮性
if(f.hasOwnProperty(item)){
console.log(item)
}
}
原型链
下面,接着看这个例子...
//构造函数
function Foo(name,age){
this.name = name
}
Foo.prototype.alertName = function(){
alert(this.name)
}
//创建示例
var f = new Foo('greentea');
f.printName = function(){
console.log(this.name)
}
//测试
f.printName()
f.alertName()
f.toString() //要去f.__proto__.__proto__中查找
image.png
instanseof
用于判断引用类型属于哪个构造函数的方法
f instanceof Foo 的判断逻辑是:
f的proto一层一层往上,能否对应到Foo.prototype
下面是一些例子
//动物
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构造函数的对象给了Dog.prototype,Dog.prototype的原型本来就是个对象,只是现在它又拥有了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 //链式操作
}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')
})
