【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一下,就会存入一个地址;再调用又会生成另外一个地址。小项目到是没什么事,但是项目一旦做大了,这

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

原型

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

构造函数:

原型:

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

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

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

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

总结

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

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

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

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-13 13:30:11

【JavaScript】——剖析面向对象与原型(一)的相关文章

《JavaScript》——面向对象之原型

上一篇文章我主要介绍的是在JavaScript里对象的创建,可是,在对象的创建过程中有很多知识我们还没有学习,那就是原型,原型式什么东东哪?在这里我想用自己的理解跟大家说说,有不对的地方大家可以给我提意见. 首先说,原型就是对象,这个对象中的属性和方法可以被共享,被谁共享哪?就是被实例们共享(当我们创建一个对象后,然后再用这个对象去实例化许多实例). 我们创建的每个对象都有一个 prototype(原型)属性,这个属性是系统自动创建的,通过这个属性(prototype)就可以直接访问到该对象的原

【JavaScript】面向对象与原型

ECMAScript有两种开发模式: 1.函数式(过程化) 2.面向对象(OOP) 但是ECMAScript没有类的概念,因此与基于类的语言的对象也有所不同. 一.创建对象 var box=new Object(); box.name='lee';                          //属性 box.run=function(){                  //方法 returnthis.name+'运行中...'; } alert(box.run()); 关于工厂模式方

《JavaScript》——面向对象与原型

谈到面向对象,我们之前学过Vb和C#,从抽象到封装再到继承和多态,面向对象的世界真的很好玩,但是JavaScript中的面向对象有些特殊,因为里面没有类,而且对象的创建方式也不同. 对象的创建大约有四种方式:使用new关键字创建.使用字面量创建.使用工厂方法创建.使用构造函数创建. 1.使用new关键字 var box = new Object(); //创建一个 Object 对象 box.name = 'Lee'; //创建一个 name 属性并赋值 box.age = 100; //创建一

javascript的基础知识及面向对象和原型属性

自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; console.log(typeof num); // 1.2 in 运算符 作用:判断指定属性是否存在于指定的对象中. 如果指定的属性存在于指定的对象中,则 in 运算符会返回 true. 语法: 属性 in 对象 返回值:true 或者 false 示例: var obj = { age: 18 };

第一百零九节,JavaScript面向对象与原型

JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript没有类的概念,因此它的对象也与基于类的语言中的对象有所不同.   一.学习条件 在JavaScript视频课程第一节课,就已经声明过,JavaScript课程需要大量的基础.这里,我们再详细探讨一下: 1

面向对象与原型5---继承

1.用原型链实现继承 最普通 但是没有办法传参,没有办法共享方法 继承是面向对象中一个比较核心的概念.其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承.而 ECMAScript 只支持继承,不支持接口实现,而实现继承的方式依靠原型链完成. 原型链是由原型加对象构造之间的关系结构形成的像一个链条一样 在 JavaScript 里,被继承的函数称为超类型(父类,基类也行,其他语言叫法),继承的函数称为子类型(子类,派生类). //继承,通过原型链实现 function Box(

javascript精髓篇之原型链维护和继承.

一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了.其实啊,光靠这一个属性是无法完成javascript的继承.我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料.另外一个看不见的prototype成员.每一个实例都有有一条指向原型的prototype属性,这个属性是无法被访问到的,当然也就无法被修改了,因为这是维护javascript继承的基础. 1 //构

javascript的面向对象详解

每次说到javascript到面向对象,总感觉自己心里懂,但是却不知道该怎么说,这就是似懂非懂到表现,于是乎,每次一说,就要到处去查找资料,零零碎碎到看了一些,感觉有懂了,但是过段时间,好像又不知道是怎么回事了,于是乎,又到处找资料,然道是我本来就缺对象?才不理解对象是啥,以至于现实中找找对象,javascript中也在找对象!哎,好尴尬啊!直到我看到了一个妹纸写到“不可不知的javascript面向对象”,我才明白面向对象是什么,这是不是说我要找到对象就是这个妹纸呢??,先记录一下备忘吧,下面

轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)

一面相对象继承机制 今天算是什么都没干,尽在了解面向对象三大特性之一的继承了,过去的学习的C++和C#都是正统的面向对象语 言,学习的时候也没有怎么深入了解过,只是简单的学习最基础的继承.下午在看继承机制的时候,看到一个很经典 的继承机制实例.这个实例使用UML很好的解释了继承机制. 说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆 形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种, 具有