Javascript基础（三）原型和原型链

题目：

• 如何准确判断一个变量是数组类型
• 写一个原型链集成的例子
• 描述new一个对象的过程
• zepto（或其他框架）源码中如何使用原型链

————————————–我是思考分界线——————————————–

知识点：

1、构造函数
2、构造函数-扩展
3、原型规则和示例
4、原型链
5、instanceof

1、构造函数

function Foo(name.age){
    this.name = name;
    this.age = age;
    this.class='class_1';
    //return this;  //默认return this
}
var f = new Foo('zhangsan',20);

2、构造函数–拓展

var a = {}其实是var a = new Object()的语法糖；
var a = [] 其实是 var a = new Array()的语法糖；
function Foo(){}其实是var Foo = new Function()的语法糖；

使用instanceof判断一个函数是否属于一个变量的构造函数；

3、原型规则和示例

5条原型规则
（1）、所有的引用类型（数组，对象，函数），都具有对象特性，即可以自由拓展属性（除了’null‘意外）；

（2）、所有的引用类型（数组，对象，函数），都有一个`'__proto__'`（隐式类型）属性，属性值是一个普通的对象。

（3）、所有的函数，都有一个prototype（显示原型），属性值也是一个普通的对象。

（4）、所有的引用类型（数组、对象、函数），`'__proto__'`属性指向他的构造函数’prototype‘属性值。

//构造函数代码示例
function Foo(name ,age){
    this.name = name
}
Foo.prototype.alertName = function(){
    alert(this.name);
}
//创建示例
var f = new Foo('zhangsan')
f.printName = function(){
    console.log(this.name);
}
//测试
f.printName();
f.alertName();

var item
for(item in f){
    //高级浏览器已经在 for in中屏蔽了来自原型的属性
    //但是这里建议大家还是加上这个判断，保证程序的健壮性
    if(f.hasOwnProperty(item)){
    //判断item是否能通过hasOwnProperty的验证，通过就说明它是f当中的属性
        console.log(item);
    }
}

原型链：

//构造函数代码示例
function Foo(name ,age){
    this.name = name
}
Foo.prototype.alertName = function(){
    alert(this.name);
}
//创建示例
var f = new Foo('zhangsan')
f.printName = function(){
    console.log(this.name);
}
//测试
f.printName();
f.alertName();
f.toString();//要去 f.__proto__.__proto__  中查找
//即要去Object.prototype中找
//即要去Object.__proto__ 会找到null

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

f instanceof Foo   true

判断逻辑是：f的'__proto__' 一层一层往上找，能否找到对应的Foo.prototype

f instanceof Object   true

解题：
1、如何准确判断一个变量是数组类型

   arr instanceof Array

2、 写一个原型链集成的例子

//封装一个dom查询的例子
function Elem (id){
    this,elem = document.getElementByI的(id)
}
Elem.prototype.html = function(val){
    var elem = this.elem
    if(var){
        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)
//console.log(div1.html)

div.html('<p>Hello</p>')

div1.on('click',function(){
    alert('clicked')
})

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

构造函数;
（1）、创建一个新对象
（2）、 this指向这个新对象
（3）、 执行代码，即对this赋值
（4）、返回this

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

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

但不能埋头苦钻，有技巧

先去网上搜，，比如jquery源码分析什么的，会有结构