JS原型链常见面试题分析

前端之家收集整理的这篇文章主要介绍了JS原型链常见面试题分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

构造函数

function@H_404_5@ Foo(name,age){
    @H_404_5@this@H_404_5@.name=name;
    @H_404_5@this@H_404_5@.age=age;
    @H_404_5@this@H_404_5@.class='class-1';
}

@H_404_5@var@H_404_5@ f=new@H_404_5@ Foo('cyy',18);

 

 

构造函数--扩展:

所有的引用类型都是构造函数

var a={}  是 var a=new Object() 的语法糖

var a=[] 是 var a=new Array() 的语法糖

function Foo()  是var Foo=new Function() 的语法糖

 

使用instanceof 判断一个函数是否是一个变量的构造函数

 

5条原型规则:

1、所有的引用类型(数组,对象,函数),都具有对象的特性,即可自由扩展属性,除了null

var@H_404_5@ a={};
a.name@H_404_5@="aa";
console.log(a);

@H_404_5@var@H_404_5@ b=[];
b.name@H_404_5@='bb';
console.log(b);

@H_404_5@ c(){}
c.name@H_404_5@='cc';
console.log(c);@H_404_5@

 

 

2、所有的引用类型(数组,对象,函数),都有一个__proto__属性(隐式原型),其属性值是一个普通的对象

 

    <@H_404_5@script@H_404_5@>@H_404_5@
        var@H_404_5@ a@H_404_5@=@H_404_5@{};
        @H_404_5@ b@H_404_5@[];
        @H_404_5@function@H_404_5@ c(){}
        console.log(a.__proto__);
        console.log(b.__proto__);
        console.log(c.__proto__);
    @H_404_5@</@H_404_5@>@H_404_5@

 

 

3、所有的函数,都有一个prototype属性显示原型),属性值也是一个普通的对象

4、所有的引用类型,__proto__属性值指向它的构造函数的prototype属性

5、当试图得到一个对象的属性时,如果这个对象本身没有这个属性,就会去它的__proto__里找(其构造函数的prototype属性中)

    404_5@this@H_404_5@.name@H_404_5@name;
            @H_404_5@.age@H_404_5@age;
        }
        Foo.prototype.alertName@H_404_5@(){
            alert(@H_404_5@.name);
        }
        @H_404_5@ f@H_404_5@new@H_404_5@ Foo(@H_404_5@'@H_404_5@cyy@H_404_5@,@H_404_5@18@H_404_5@);
        f.alertName();
    @H_404_5@>@H_404_5@

 

    );
        f.consoleName@H_404_5@(){
            console.log(@H_404_5@ item;
        @H_404_5@for@H_404_5@(item @H_404_5@in@H_404_5@ f){
            @H_404_5@//@H_404_5@高级浏览器会屏蔽来自原型的属性@H_404_5@
            但还是建议加上这个判断,保持程序的健壮性@H_404_5@
            if@H_404_5@(f.hasOwnProperty(item)){
                console.log(item);
            }
        }
    @H_404_5@>@H_404_5@

 

 

    (f.hasOwnProperty(item)){
                console.log(item);
            }
        }
        @H_404_5@f没有toString方法,会去Foo上找@H_404_5@
        Foo没有toString方法,会去Object上找@H_404_5@
        Object如果也没有,就是null@H_404_5@
        f.toString();
    @H_404_5@ Obj(name){
            @H_404_5@name;
        }
        @H_404_5@ o@H_404_5@ Obj();
        console.log(o.toString());
    @H_404_5@>@H_404_5@

 

 

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

    .name);
        }
        console.log(f @H_404_5@instanceof@H_404_5@ Foo);
        console.log(f @H_404_5@ Object);
    @H_404_5@>@H_404_5@

 

 

如何判断一个变量是数组类型?

    [];
        console.log(a @H_404_5@ Array);
    @H_404_5@>@H_404_5@

 

 

写一个原型链继承的实例:

     Animal(){
            @H_404_5@.eat@H_404_5@(){
                console.log(@H_404_5@animal eat@H_404_5@);
            }
        }
        @H_404_5@ Dog(){
            @H_404_5@.bark@H_404_5@dog bark@H_404_5@);
            }
        }
        Dog.prototype@H_404_5@ Animal();
        @H_404_5@ d@H_404_5@ Dog();
        d.eat();
        d.bark();
    @H_404_5@>@H_404_5@

 

 

描述new一个对象的过程:

1、创建一个新对象

2、将this指向这个对象

3、给this赋值

4、返回这个对象

 

一个原型链继承的实例:

封装DOM查询

<!@H_404_5@DOCTYPE html@H_404_5@>@H_404_5@
html @H_404_5@lang@H_404_5@="en"@H_404_5@head@H_404_5@>@H_404_5@
    Meta @H_404_5@charset@H_404_5@="UTF-8"@H_404_5@name@H_404_5@="viewport"@H_404_5@ content@H_404_5@="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no"@H_404_5@title@H_404_5@>@H_404_5@demobody@H_404_5@div @H_404_5@id@H_404_5@="text"@H_404_5@>@H_404_5@这是一段长长的文本div@H_404_5@>@H_404_5@

     Ele(id){
            @H_404_5@.elem@H_404_5@document.getElementById(id);
        }

        Ele.prototype.html@H_404_5@(val){
            @H_404_5@ elem@H_404_5@.elem;
            @H_404_5@(val){
                @H_404_5@设置innerHTML@H_404_5@
                elem.innerHTML@H_404_5@val;
                @H_404_5@return@H_404_5@ ;
            }@H_404_5@else@H_404_5@{
                @H_404_5@获取innerHTML@H_404_5@
                return@H_404_5@ elem.innerHTML;
            }
        }

        Ele.prototype.on@H_404_5@(type,fn){
            @H_404_5@.elem.addEventListener(type,fn);
       return this; } @H_404_5@ text@H_404_5@ Ele(@H_404_5@text@H_404_5@); console.log(text.html()); text.html(@H_404_5@设置了新的html@H_404_5@).on(@H_404_5@click@H_404_5@clicked@H_404_5@); }); @H_404_5@html@H_404_5@>@H_404_5@

 

猜你在找的JavaScript相关文章