js 原型对象和原型链

抛出问题

• 如何判断一个变量是数组类型
• 写一个原型链继承的例子
• 描述new一个对象的过程
• zepto源码中如何使用原型链

知识点

构造函数

function Foo(name, age){
    this.name = name;
    this.age = age;
}

var f = new Foo('zhangsan', 20);

构造函数-扩展

var a = {} 和 var a = new Object()效果相同
var a = [] 和 var a = new Array()效果相同
function Foo(){} 和 var Foo = new Function(){} 效果相同

原型规则和实例

• 所有的引用类型都有对象的特性，即可自由扩展属性
• 所有的引用类型都有一个__proto__属性，属性值为普通的对象
• 所有的函数有一个prototype 属性
• 所有的引用类型__proto__指向 构造函数的 prototype

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn(){}
fn.a = 100;

• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去他的__proto__中寻找

function Foo(name){
    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();

原型链

function Foo(name){
    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__中寻找

instanceof

用于判断应用类型是哪个构造函数

• f instanceof Foo 判断逻辑
• f 的 __proto__ 一层一层的往上找
• 在试着判断 f instanceof Object

解决问题

• 如何判断一个变量是数组类型

var arr = [];
arr instanceof Array //true
//当网页中存在框架时，可能会出现问题
Object.prototype.toString.call(val) === '[object Array]' //true

• 写一个原型链继承的例子

function Amimal(){}
function Dog(){}

Dog.prototype = new Animal();

• 描述new一个对象的过程

function Foo(name, age){
    this.name = name;
    this.dog = dog
    // return this
}

• zepto源码中如何使用原型链