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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/benben513624/article/details/78119029
一、题目

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

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

没有更多推荐了,返回首页