前端面试之---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>>');