【JavaScript】5.面试题一原型和原型链

一、题目

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

    var array=[];
    console.log(array instanceof Array);//true 判断引用类型的具体类型要用instanceof
    console.log(typeof array);//Object

2、写一个原型链继承的的例子

    //封装一个DOM查询实例
    function Elem(id){
        this.elem=document.getElementById(id);
    }
    Elem.prototype.html=function(val){
        var elem=this.elem;
        if(val){
            elem.innerHTML=val;
        }else{
            return elem.innerHTML;
        }
    }
    Elem.prototype.on=function(type,fn){
        var elem=this.elem;
        elem.addEventListener(type,fn);
        return this;
    }
    var dev=new Elem('dev1');
    console.log(dev.html('<p>hello world!</p>'));
    dev.on('click',function(){
        alert('clicked');
    })

3、描述new一个对象的过程
（1）创建一个新对象
（2）this指向这个新对象
（3）执行代码，即对this进行赋值

（4）返回this

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

4、zepto(或其他框架)源码中如何使用原型链
（1）阅读源码是高效提高技能的方式
（2）但不能‘埋头苦钻’有技巧在其中
（3）慕课网搜索‘zepto设计和源码分析’
二、知识点
1、构造函数
构造函数有个特点，函数名首字母大写，构造函数就类似于一个模板，可以new出来多个实例
2、构造函数-扩展

（1）var a={}其实是var a=new Object()的语法糖

（2）var a=[]其实是var a=new Array()的语法糖

（3）function Foo(){}其实是var Foo=new Function(...)

（4）使用instanceof判断一个函数是否是一个变量的构造函数
3、原型规则和示例
（1）所有的引用类型（数组，对象，函数），都具有对象特征，即自由扩展属性（除了null以外），如下代码所示，都可以自由扩展属性a

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

（2）所有的引用类型（数组，对象，函数），都有一个__proto__属性，属性值是一个普通的对象,如下代码所示：

    var obj = {};
    obj.a = 100;
    var arr = [];
    arr.a = 100;
    function fn() {
    };
    var f1=new fn();
    fn.a = 100;
    console.log(obj.__proto__);
    console.log(arr.__proto__);
    console.log(fn.__proto__);

（3）所有的函数，都有一个prototype属性，属性值也是一个普通的对象

    function fn() {
    };
    var f1=new fn();
    fn.a = 100;
    console.log(fn.__proto__);
    console.log(fn.prototype);

（4）所有的引用类型（数组，对象，函数），__proto__属性值指向他的构造函数的“prototype”属性值

    var obj = {};
    obj.a = 100;
    var arr = [];
    arr.a = 100;
    function fn() {
    };
    var f1=new 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);//true
    console.log(fn.__proto__ === fn.prototype);//true

（5）当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数的prototype)中寻找，即console.log(obj.__proto__ === Object.prototype);
4、原型链

5、循环对象自身属性

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

5、instanceof

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