【JavaScript】——剖析面向对象与原型(一)

时间:2021-10-04 16:14:59

在面向对象与原型一章中,感觉还是挺有意思的,而且视频讲解的也很清楚,在这里总结归纳一下视频里

讲的内容,顺便整理整理自己的思路。

首先画一张图,理一下这一整章的知识点。

【JavaScript】——剖析面向对象与原型(一)

下面针对具体的知识点去剖析各个知识点间的关系:


工厂模式


工厂模式的引出,是为了避免在创建对象过程中产生大量重复的问题。它封装了在创建对象过程一些重复

的代码,避免了代码冗余。举个简单的Demo:

1、普通的创建对象:

var p=new Object();
p.name='王虹芸';
alert('姓名:'+p.name);

在需要两个人及以上的时候就需要重复上述代码,造成代码冗余。这时候看:

2、工厂模式:

function createObject(name){
var obj=new Object();
obj.name=name;
return obj;
}
var p1=createObject('王虹芸');
var p2=createObject('曾金');
alert('姓名:'+p1.name);
alert('姓名:'+p2.name);

无论想创建多少人,直接在后边添加就可以了。

但是工厂模式不能明确实例从属与具体哪个对象,返回的类型值都是“object”,这为代码维护会带来很

多困难。所以引进了:构造函数。


构造函数


与工厂模式不同的是,构造函数的首字母必须大写,在函数体内,不用new object,系统自动会给构造函

数创建对象。所以与工厂模式将属性和方法赋给object不同的是,构造函数直接赋给this对象。并且构造函数没有返

回值(return)。

构造函数与普通函数的不同又在哪里?除了首字母必须大写外,构造函数还必须用new运算符进行调用。

看将上述例子改造后的代码:

function Box(name){
this.name=name;
}
var p1=new Box('王虹芸');
var p2=new Box('曾金');
alert('姓名:'+p1.name);
alert('姓名:'+p2.name);

还记得构造函数与工厂模式的优势在哪里吗?能知道实例从属于哪里对不对?这里,只需要使用“instanceof”就能

知道创建的实例是否从属于Box。

构造函数看上去还是挺强大的哈,但是在调用同一个构造函数的时候,地址却不相同。因为在调用的时候

只要new一下,就会存入一个地址;再调用又会生成另外一个地址。小项目到是没什么事,但是项目一旦做大了,这

种浪费的事还是少做为好,所以又引出了另一个知识:原型。


原型


先看构造函数与原型在调用时的区别:

构造函数:

【JavaScript】——剖析面向对象与原型(一)

原型:

【JavaScript】——剖析面向对象与原型(一)

通过图示我们能看出,原型在实例话的时候,通过Box中的“_proto_”指针指向了同一个对象,所以在调

用原型的时候,地址是相同的。

另外需要强调的是,原型结构中,构造函数体内是没有内容的,但是一旦构造函数体有内容,并且和原型

里的属性和方法有重复的时候,会先调用构造函数里的值。


总结


本来想把后边的几种方式都分析分析,但是感觉内容会很多,并且博客会显得很累赘。所以点到为止,并

且后边的几种方式都是在工厂模式、构造函数与原型的基础上进行变形,让功能更加丰富。所以以这三个知识点为基

础,觉得后边的内容也就没有什么了。

下一篇博客主要想说一下,JavaScript中的继承,在结合PDF与视频的过程中,感觉这里说的继承和之前了

解的还是有些微的不同,留在下次再说吧~