js面试题讲解(原型与原型链)

2017-11-02  本文已影响0人  晓綾

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

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

3.描述new一个对象的过程

4.zepto(或其他框架)源码中如何使用原型链

知识点:

1.构造函数

2.构造函数-扩展

3.原型规则和示例

4.原型链

5.instanceof

讲解:

构造函数:一般函数为大写字母开头的都是构造函数,如下:

function Foo(name,age){

    this.name=name

    this.age=age

    //return this

}

var f = new Foo('L',20) ; //构造函数形成实例,可以创建多个对象;f是一个空对象,原型是Foo

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

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

function Foo(){}其实是var Foo=new Function()

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

f instanceof Foo //判断f这个引用类型是否属于Foo构造函数,判断逻辑:f的_proto_一层一层往上,能否对应到Foo.prototype

判断一个变量是否为"数组":变量名 instanceof Array,如下代码:

var arr=[];

arr instanceof Array //true

typeof arr //object, typeof是无法判断是否是数组的

原型规则和示例:

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

2.所有引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象

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

var obj={};

obj.a=100;

function fn(){}

fn.a=100;

console.log(obj._proto_); //隐式原型,都具有可扩展属性原则

console.log(fn.prototype); //显示原型

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

console.log(obj._proto_===Object.prototype) //obj的构造函数为new Object(),所以obj的隐式原型属性就指向Object的显示原型属性

5.当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么它会去它的_proto_(即它的构造函数的prototype)中寻找

1 //构造函数

2 function Foo(name,age){

3    this.name = name

4 }

5 Foo.prototype.alertName= function(){

6    alert(this.name+"killua");

7 }

8 //创建示例

9 var f = new Foo("L");

10 f.lastName = function(){

11    console.log(this.name)

12 }

13 f.lastName(); //"L",自身属性

14 f.alertName(); //"Lkillua",原型属性

15 //以上函数中,f共有3个属性,f自身的属性有2个(name属性和lastName属性),还有一个alertName是原型属性

16 f.firstName();//这里f自身属性中没有firstName属性,它的原型Foo函数中也么有这个属性,所以要再往上一层Foo的原型上去找这个属性,这种有多层原型的函数就是原型链,直到null为止结束原型链

17 var item;

18 for(item in f){

19    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性,但是这里建议加上这个判断,保证程序的健壮性

20    if(f.hasOwnProperty(item)){  //循环遍历f函数,如果f函数有它自身的属性item,则打印出item属性

21        console.log(item)

22    }

23 }

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

  简单易懂的例子:

1 function Name(){

2    this.name=function(){

3        console.log("killua")

4    }

5 }

6 function Firstname(){

7    this.firstname=function(){

8        console.log("L")

9    }

10 }

11 Name.prototype = new Firstname();

12 var he = new Name();

13 console.log(he.name); //"killua"

14 console.log(he.firstname); //"L"

  稍复杂点的例子(建议面试用):

1 function Elem(id){

2    this.elem = document.getElementById(id)

3 }

4 Elem.prototype.html = function(val){

5    var elem = this.elem

6    if(val){

7        elem.innerHTML = val

8        return this //链式操作

9    }else{

10        return elem.innerHTML

11    }

12 }

13 Elem.prototype.on = function(type, fn){

14    var elem = this.elem

15    elem.addEventListener(type, fn) //addEventListener() 方法用于向指定元素添加事件句柄

16 }

17 var div1 = new Elem('div1')

18 //console.log(div1.html())

19 div1.html('<p>hello killua</p>').on('click',function(){

20    alert('clicked')

21 }).html('<p>javascript</p>')

上一篇下一篇

猜你喜欢

热点阅读