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

谈到面向对象,我们之前学过Vb和C#,从抽象到封装再到继承和多态,面向对象的世界真的很好玩,但是JavaScript中的面向对象有些特殊,因为里面没有类,而且对象的创建方式也不同。

对象的创建大约有四种方式:使用new关键字创建、使用字面量创建、使用工厂方法创建、使用构造函数创建。

1、使用new关键字

var box = new Object(); //创建一个 Object 对象
box.name = 'Lee'; //创建一个 name 属性并赋值
box.age = 100; //创建一个 age 属性并赋值
box.run = function () { //创建一个 run()方法并返回值
return this.name + this.age + '运行中...';
};
alert(box.run()); //输出属性和方法的值

2、使用字面量创建

var box ={
	name:'帅哥',
	age:'25',
	run :function(){
		return this.name+"的年龄是"+this.age
	}
}

alert(box.run());

3、使用自定义函数创建(工厂模式)

function createObject(name,age){
	var obj=new Object();
	obj.name=name;
	obj.age=age;
	obj.run=function(){
		return this.name+this.age;
	};
	return obj;
};

4、使用构造函数创建

function Box(name,age){
	this.name=name;
	this.age=age;
	this.run=function(){
		return this.name+this.age+'看我......';

	};
};

4、四种方式的比较

四种方式创建对象各有利弊,new关键字与字面量方式比较起来,使用字面量方式在创建对象的时候添加属性和方法比较简单,方便。但是对于创建更多类似的对象的时候,上面两种方式就变得繁琐起来,因为对象需要一个个的创建后再添加属性和方法太麻烦了,这时候工厂模式方法就出来了,使用工厂模式方法,解决了创建多个类似对象声明的问题,但是它无法区分实例从属于哪个对象,例子如下所示。

var box = createObject('帅哥', 20);
alert(box1 instanceof Object); //返回true,只能判断它从属于Object

问题出现了,总有解决办法吧!这时候,构造函数创建对象的方法就登台了,使用构造函数的方法,即解决了重复实例化的问题,又解决了对象识别的问题。代码如下。

var box= new Box('美女', 20);
alert(box instanceof Box); //返回true,很清晰的识别box从属于 Box

构造函数方法与工厂模式方法比较起来,构造函数方法没有显示的创建对象(没有var box = new Object()),直接将属性和方法赋值给this对象,还没有Return语句(Return obj)。这些没有的东东在使用构造函数创建对象的时候是后台自动运行的,是不是很省劲儿?

5、构造函数与普通函数的区别

声明:构造函数首字母需要大写,主要目的是为了好区分。

调用:使用new 关键字调用,var box = new Box(‘美女‘, 20);

小结

四种声明创建对象的方式层层递进,都是伴随着问题的升级而出现的,在这里我想到了金庸小说里的一句话“英雄是随着时代产生的”,映射到对象创建这个问题上来,方法是伴随着问题产生的。

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

时间: 2024-11-08 21:42:08

《JavaScript》——面向对象与原型的相关文章

JS面向对象与原型

面向对象与原型一.创建对象 1.基本方法 1 var box = new Object(); //创建对象 2 box.name = 'Lee'; //添加属性 3 box.age = 100; 4 box.run = function(){ //添加方法 5 return this.name + this.age + '运行中...'; //this表示当前作用于下的对象 6 }; 7 8 alert(box.run()); 9 10 alert(this.anme); //这里的this代表

面向对象与原型4---原型

原型模式创建对象也有自己的缺点,它省略了构造函数传参初始化这一过程,带来的缺点就是初始化的值都是一致的.而原型最大的缺点就是它最大的优点,那就是共享.原型中所有属性是被很多实例共享的,共享对于函数非常合适,对于包含基本值的属性也还可以.但如果属性包含引用类型,就存在一定的问题: 1. //原型的缺点 function Box() {};Box.prototype = {constructor : Box,name : 'Lee',age : 100,family : ['父亲', '母亲', '

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

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

面向对象与原型2---原型

1. 我们创建的每个函数(或称构造函数或对象)都有一个 prototype(原型)属性,这个属性是一个对象(这个对象下有个prototype属性,而这个属性其实是另外一个对象的引用,这个属性就是一个对象),它的用途是 包含可以由特定类型的所有实例共享的属性和方法(prototype共享放到其中的属性和方法,无论实例化多少对象,属性和方法都是共享的.这样有好处也有坏处.).逻辑上可以这么理解:prototype 通过调用构造函数而创建的那个对象的原型对象.使用原型的好处可以让所有对象实例共享它所包

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

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

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

在面向对象与原型一章中,感觉还是挺有意思的,而且视频讲解的也很清楚,在这里总结归纳一下视频里 讲的内容,顺便整理整理自己的思路. 首先画一张图,理一下这一整章的知识点. 下面针对具体的知识点去剖析各个知识点间的关系: 工厂模式 工厂模式的引出,是为了避免在创建对象过程中产生大量重复的问题.它封装了在创建对象过程一些重复 的代码,避免了代码冗余.举个简单的Demo: 1.普通的创建对象: var p=new Object(); p.name='王虹芸'; alert('姓名:'+p.name);

十一、面向对象与原型

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

面向对象之原型——challenge

面向对象之原型 object-oriented面向对象的设计,不同于其他语言,js中的面向对象没有类的概念,因此,其对象也有些特殊. 所谓对象就是无序属性的集合,其属性可以包含基本值.对象.函数.也就是说对象是一组没有特定顺序的值的集合:对象的每个属性或方法都有自己名字,名字映射到一个值(值可以是数据或者函数) 每个对象是基于引用类型创建的,是某个引用类型的实例.新对象就是new操作符后加一个构造函数创建的 1理解对象 这个就没什么必要,对象就是无序属性的集合,OK了 2创建对象 原始方式:传统

js面向对象及原型(javaScript高级程序设计第3版)

一.创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个Object对象 box.name = 'Lee'; //创建一个name属性并赋值 box.age = 100; //创建一个age属性并赋值 box.run = function () { //创建一个run()方法并返回值 return this.name + this.age + '运行中...'; }; alert(box.run()); //输出属性和方法的值 上面

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 };