原型和原型链

问题

1. 如何准确判断一个变量是数组类型

var arr = [];
arr instanceof Array; //true
tyoeof arr;           //object，无法判断

2. 写一个原形链继承的例子

funtion Animal(){
    this.eat = function(){
        console.log("eat");
    }
}
function Dog(){
    this.bark = function(){
        console.log("bark");
    }
}
Dog.prototype = new Animal();
var hashiqi = new Dog();

3. 描述new一个对象的过程

//考察构造函数
创建一个新对象；this指向新对象；执行代码，this赋值；返回this新对象；

4. zepto（或其他框架）源码中如何使用原型链

阅读源码是高效提高技能的方式

知识点

1. 构造函数

function Person(name ,age){
    this.name = name;
    this.age = age;
    this.class = "class-1";
    //return this; //默认返回当前对象
}
var p = new Person("zhangsan", 20);

2. 构造函数 - 扩展

var a = {} 其实是 var a = new Object()的语法糖
var a = [] 其实是 var a = nre Array()的语法糖
function Foo(){...} 其实是var Foo = new Function(){...}
使用instanceof 判断一个函数是否是一个变量的构造函数

3. 原型及原型链

5条原型规则

所有的引用类型（数组、对象、函数）都具有对象特性，即可自由拓展属性（除了null 以外）；
所有的引用类型都有一个隐式原型proto属性，属性值是一个普通的对象；
所有函数都有一个显示原型prototype属性，属性值也是一个普通对象；
所有的引用类型proto属性指向其构造函数的显示原型prototype属性；

如果对象在自身没找到某一个属性，那么它会继续在它的隐式原型proto(即它的构造函数的prototype)中去找；

//构造函数
function Person(name ,age){
    this.name = name;
    this.age = age;
}
//原型
Person.prototype.alertName = function(){
    alert(this,name);
}
//创建实例
var p = new Person("zhangsan", 20);
p.alertAge = function(){
    alert(this.age);
}
//测试
p.alertAge(); //20 自身属性
p.alertName(); //"zhangsan" 要去p._proto_（Person.prototype）中找
p.toString(); //要去p._proto_._proto_（Object.prototype中）中找
//循环对象自身的属性
for(var item in p){
    //高级浏览器已经屏蔽了来自原型的属性，但是这个为了保证兼容性和健壮性建议还是添加这个筛选
    if(p.hasOwnProperty(item)){
        console.log(item)
    }
}

4. instanceof

用于判断引用类型属于哪个构造函数的方法

p instanceof Person; //true
p instanceof Object; //true

实例

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);
    return this;
}

var div1 = new Elem("a");
div1.html("Hello").on('click',function (){
    alert("Hello");
})

最后编辑于：2017.12.29 00:24:51