下面小编就为大家带来一篇基于 js 中的原型、继承的一些想法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近看到一个别人写的 js 类库,突然对 js 中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享,
一、instanceof
在 JavaScript 有 instanceof 运算符,是二元运算符,使用方法 instanceA instanceof A,返回值是布尔值(boolean),含义是判断 instanceA 是否是 A 的一个实例,其实质是判断 A.prototype===instanceA.__proto__,如
- function f2(){
- var f=function(){}
- var test=new f();
- console.log(test instanceof f);//true
- console.log((f.prototype===test.__proto__));//true
- }
上边的两个打印都是 true。说明 test 是 f 的一个实例;test 的__proto__属性指向了 f 的 prototype 对象,即 f 的 prototype 属性是一个对象,且此对象是 f 的一个实例。
二、js 中对象
在 js 中一切皆是对象,对象分为函数对象和普通对象,常用的函数其实是函数对象,如
- //函数对象
- var f=function(){}
- var f2=new Function('str','console.log(str)')
- function f3(){}
- //普通对象
- var o=new Object();
- var o2={}
- var o3=new f()
上面看到 f、f2、f3 是函数对象,o、o2、o3 是普通对象。
函数对象和普通对象的区别:
所有使用 new Function() 的方式创建的对象都是函数对象,f 和 f3 两种方式,最终是也是使用 new Function() 方式创建的;
在定义一个对象时,对象中包含一些预定义的属性,如,prototype、__proto__,其中 prototype 属性只有函数对象才有,__proto__则是对所有的对象都有,所以可以通过对象的__proto__属性判断一个对象是函数对象还是普通对象,如
- //函数对象
- var f = function() {}
- //普通对象
- var o = new Object();
- console.log(f.prototype); //Object {}
- console.log(o.prototype); //undefined
从上边可以得出函数对象存在 prototype 属性,而普通对象的 prototype 对象则是未定义。
三、原型链
从上边知道所有的对象都有一个__proto__属性,这个属性指向创建它的函数对象的原型对象 prototype,我们把这种使用__proto__属性串起来的链叫做原型链,如下面是一个原型链,
上图,以 person 为例,说明原型链,
- var person=function(){}
- var person1=new person();
1、person 是一个函数对象,person1 是 person 的一个实例
2、person1 的__proto__属性是 person 的原型对象 person.prototype
3、由于 person 的原型对象 person.prototype 是一个对象,它也有一个__proto__属性,这个属性指向的 Object 的原型对象 Object.prototype
4、Object 的原型对象 Object.prototype 是一个对象,它也有一个__proto__属性,这个属性的原型对象为 null。
四、一些继承
在 js 中我们会定义一个函数对象,如
- var person=function(){}
上面我们定义了一个函数对象,它没有任何的属性,是一个空对象,由于它是一个对象,所以可以为它增加属性,
- var person=function(){}
- person.name1='js'
- console.log(person.name1)//js
上面的代码为 person 新增了一个 name 属性,且赋值为 js,且可以打印出 name 属性的值
但是当我们创建一个 person 的实例 person1 的时候,如下
- var person = function() {};
- person.name1 = 122;
- console.log(person.name1);
- var person1 = new person();
- console.log(person1.name1); //undefined
可以看到 person1 没有 name1 这个属性,那么如何才能保证 person 的实例也有 name1 属性呢,
- var person = function() {};
- person.name1 = 122;
- //使用prototype对象为对象添加属性,这样所以的实例都会有此属性
- person.prototype.name1 = '12';
- console.log(person.name1);
- var person1 = new person();
- console.log(person1.name1); //12
上面,使用了 person.protoype.name1='12',这样所有的实例都有了 name1 属性,使用这种方式添加的属性,在生成实例的时候会把属性当作实例的共有属性。
以上这篇基于 js 中的原型、继承的一些想法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0327/263683.html