前端系列之---javascript原型

知识点

构造函数

       function Foo(name,age) {
            this.name = name;
            this.age = age;
            this.class = 'class -1';
            //return this;
        }
        var f = new Foo('zhangsan',20);
//        var f1 = new Foo('lisi',21);

构造函数-扩展

原型规则和实例

5条原型规则是理解原型链的基础

所有的引用类型（除null外）都可以自由扩展属性

所有的引用类型都有一个_proto_属性，叫隐式原型。属性值是一个普通的对象

所有的函数，都有一个prototype属性，叫显式原型。属性值是一个普通的对象

所有的引用类型的_proto_属性，指向它的构造函数的prototype属性值；

当试图得到一个对象的某个属性时，如果没有，会向它的_proto_中找。即去它的构造函数的prototype中找。

var obj = {}; obj.a = 100;
var arr = []; arr.b = 200;
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 () {
    console.log(this.name)
}
var f = new Foo('zhangsan',20);
f.printName = function () {
    console.log(this.name)
}

f.printName();
f.alertName();

f.toString();

//对象自身没有toString，先去f的隐式原型中找，即Foo.prototype中找；
//Foo.prototype也没有，再去Foo.prototype的隐士原型中找。，即Foo.prototype的构造函数的prototype，
//即Function.prototype中找。即Object中找。

//f.__proto__.__proto__

var item ;
for(item in f){
    if(f.hasOwnProperty(item)){
        //高级浏览器已经在for in中屏蔽了来自原型的属性
        //建议加上这个判断，保证程序的健壮性
        console.log(item);
    }
}

原型链

Instanceof

如何准确判断一个对象是数组类型

写一个原型链继承的例子

这样写会特别low  要写一个实战的例子

function Animal() {
    this.eat = function () {
        console.log("animal eat");
    }
}

function Dog() {
    this.bark = function () {
        console.log("dog bark")
    }
}

Dog.prototype = new Animal();
var hashiqi = new Dog();

描述new一个对象的过程

创建一个新对象

This指向这个对象

执行代码，对this赋值

返回this

Zepto或其他框架源码是如何实现原型链的

没有全看，重点看，需要就看

      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('detail-page');

//        console.log(div1.html());

        div1.html("<p>hello world</p>>").on('click',function () {
            alert("_clicked_")
        }).html('<p>javascript</p>>');