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

太过爱你忘了你带给我的痛 2022-06-08 14:18 287阅读 0赞

一、题目

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\_\_属性，属性值是一个普通的对象,如下代码所示：

（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、原型链  
![Center][]

5、循环对象自身属性

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

5、instanceof

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

[Center]: /images/20220608/6607e39a02f6419e958f9badf1388271.png