JavaScript学习总结三:js基于原型面向对象

时间:2022-02-11 03:22:41

      JavaScript原型概念说不好理解其实没那么难,说好理解其实也没那么简单,关键是你有没有找到一个合适自己的理解方法。

 

预备知识:

      我想研究js原型的人肯定对js有一定了解,所以基础的知识不再赘述。但是我还要强调一些变态的知识点:

l  JavaScript没有类的概念,是基于原型的面向对象。

l  function这个关键字一定要理解正确!这不是传统意义上的定义函数的关键字,而是类!一定要把function理解成类!所以,在function a(){}时,其实你是在创建一个functio的实例,a不是函数,而是对象!这正好符合一句真理:“一切皆对象”。

l  new关键字也不是传统的new。后边加的是对象,而不是类。

l  JavaScript中没有方法,只有属性。

l  .表示访问(获取成员属性),()表示执行。比如fun.x()可以理解为:fun这个对象访问了x属性,并执行这个属性。

 

概念描述(部分内容来自于网络):

      在说原型之前,还要先说点别的知识。上边提到function实际上是在创建对象,这时候它充当了两个角色:创建对象、构造函数。JavaScript就是这么规定的,所有的对象在创建时都要有构造函数。还有需要注意的就是new关键字后边接的全是对象,并不是类,new的功能和传统的语言也不一样,因为JavaScript是基于原型的,没有类,所以new不可能完成传统new的功能,那它做什么了呢?我就简单的说一句:new其实就实现了原型机制(具体怎么做的网上资料有的是)。

究竟什么是原型,下边是来自网络的一段话:

“javascript原型是一个对象。 javascript中所有的构造函数都有一个属性,叫prototype,这个属性存放的就是原型对象;访问这个属性通过:函数名.prototype ,从而可以访问到这个原型对象,也可以为这个原型赋值。在原型对象中有一个属性叫constructor,这个constructor指向函数本身。我们可以访问到原型中的这个属性:函数名.prototype.constructor;我们可以为原型对象添加属性并赋值:函数名.prototype.属性名=值;为函数原型添加的属性,都会成为构造函数的属性,从而成为对象的属性。既然对象具有了原型内的属性,说明对象中的这些属性是从原型中继承来的。所以javascript是基于原型的继承的。”

      其实原型就是对象的prototype属性指向的对象。对象通过prototype属性继承了“父类”的特性,甚至包括构造函数在内。证明继承了构造函数的例子:

<script type="text/javascript">
function fun1(){alert("我爱中国");}//fun1的构造函数
fun2 = new fun1();//通过fun1创建fun2
fun3 = new fun2();//我们并没有定义fun2的构造函数,但是成功的创建了fun3,说明构造方法也会继承
fun3();//输出“我爱中国”
</script>

      现在再回过头来看new和function,我们可以通过function和new两种方式创建对象,但两者都要求必须有构造函数,只不过function同时承担了创建对象和构造函数两个职责,而new却要找“父类”的构造函数(系统内部的对象比如Array也有构造函数,这样我们才可以顺利的new,只不过隐藏了)。此时,应该不难理解new实际上是把“父类”作为原型给“子类”的prototype属性。而function是新建,以自己为原型给自己的prototype属性。

      这差不多就是JavaScript的原型继承机制了!继续深入,上文提到JavaScript没有方法,只有属性。实际上所有的对象都可以理解为一个属性包,或者说散列数组(key,value),对象只有访问成员的操作。通过“.”指定要访问的属性,通过“()”执行属性(可以理解为方法),JavaScript并不管我们要执行的属性是什么,只负责通过key(属性名)找到相应的value(属性值),所以对象的属性值可以是对象,也可以是数值,是对象的话我们可以用“()”执行,是数值型的话就直接“.”+属性名访问。

 

原型链:

      我们可以自行更改prototype属性,也就是自行设置对象的原型对象。同时,原型继承是链式的。比如,b继承了a,c又继承了b,那么c也继承了a,这样就构成了原型链。原型链的特性是:读的时候从原型链上读,写的时候向自己里面写。大致意思就是:在刚刚abc的例子中,如果在c中访问了一个属性,但是c中没有,会自动去b、a中寻找;但是如果向c中添加属性,那么就直接写在c中。

      示例代码:

<script type="text/javascript">
function fun1(){}//创建fun1对象,原型为自身
function fun2(){}//创建fun2对象,原型为自身
fun1.prototype = new Object();//设对象fun1的原型为最底层的系统的Object对象
fun2.prototype = new fun1();//设对象fun2的原型为fun1
Object.prototype.a="a";//给对象Object的原型添加一个数值型a属性
fun = new fun2();//创建一个fun2的对象,继承fun2的所有属性
alert(fun.a);//调用fun2继承来的a属性,实际上调用的Object原型中的a。打印出“a”
fun1.prototype.a = "a1";//给fun1的原型(即Object)对象添加一个数值型a属性
alert(fun.a);//调用fun2继承来的a属性,实际上调用的fun1原型(即Object)中的a。打印出“a1”
</script>

     图解:

JavaScript学习总结三:js基于原型面向对象