ES5:深入解析如何js定义类或对象。
1.原始方式
var oCar = new Object;
oCar.color = "blue";
oCar.showColor = function(){alert(this.color)};
缺点:需要创建多个oCar的实例;
2.工厂方式
解释:使用工厂函数(factory function)
function carFactory(){
var oCar = new Object;
oCar.color = "blue";
oCar.showColor = function(){alert(this.color)};
return oCar;
}
var oCar1 = carFactory();
var oCar2 = carFactory();
此时,虽然解决了原始方式中,创建多个实例的缺点,但是两个对象oCar1与oCar2的属性一模一样;
优化1:
function carFactoty(col){
var oCar = new Object;
oCar.color = col;
oCar.showColor = function(){alert(this.color)}
}
var oCar1 = carFactoty("blue");
var oCar2 = carFactoty("red");
oCar1.showColor();
oCar2.showColor();
此时,通过向工厂函数传递参数的方法,改变了两个对象默认属性值一样的问题。
缺点:每次调用carFactory方法,都要创建一次showColor方法,意味着每个对象有自己的showColor版本,其实,两个对象只需共享同一个函数就可以了。
优化2:
function showColor(){alert(this.color)};
function carFactory(col){
var oCar = new Object;
oCar.color = col;
oCar.showColor = showColor;
}
var oCar1 = carFactory("blue");
var oCar2 = carFactory("red");
oCar1.showColor();
oCar2.showColor();
此时,虽然解决了优化1中的showColor()在不同对象中不同版本的问题,然而,新定义的showColor()方法,却不像是对象的方法。
3.构造函数方式
解释:在构造函数内没有创建对象,而是使用this关键字,在使用new运算符执行构造函数时,会在执行代码之前创建一个对象,使用this访问该对象,通过this给对象赋予属性和方法。默认返回this。
function consFactory(col){
this.color = col;
this.showColor = function(){alert(this.color)}
}
var oCar1 = new consFactory("red");
var oCar2 = new consFactory("blue");
此时,就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本
4.原型方式
解释:通过给proFunction的prototype属性添加属性,从而给proFunction添加属性。oCar1存放的实际上是指向showColor的指针,这样所有的属性,看起来都属于同一对象了。
注意:在构造函数的原型中,是不能接受构造函数的参数的。也就是,不能通过参数来初始化属性的值。
function proFunction(){};
proFunction.prototype.color = “blue”;
proFunction.prototype.showColor = function(){alert(this.color)}
var oCar1 = new proFunction();
var oCar2 = new proFunction();
此时,在创建对象后才能真正改变属性的默认值,最痛点是,当属性指向的是对象时,对象不能被多个实例共享。
如:
function Car() {
}
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
alert(this.color);
};
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Bill");
alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John,Bill"
解释:属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。由于 drivers 是引用值,Car 的两个实例都指向同一个数组。
这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。
5.构造函数/原型混合方式
ES5:深入解析如何js定义类或对象。的更多相关文章
- js定义类或对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS定义类及对象
1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Obje ...
- JS定义类的六种方式详解
转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...
- JS创建类和对象
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
- JS创建类和对象(好多方法哟!)
http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 ...
- 我所了解的关于JavaScript定义类和对象的几种方式
原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...
- JavaScript定义类与对象的一些方法
最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...
- JS创建类和对象,看完了,头就不大了
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
- 优雅地创建未定义类PHP对象
在PHP中,如果没有事先准备好类,需要创建一个未定义类的对象,我们可以采用下面三种方式: new stdClass() new class{} (object)[] 首先是stdClass,这个类是一 ...
随机推荐
- 1016 部分A+B (15 分)
正整数 AAA 的“DAD_ADA(为 1 位整数)部分”定义为由 AAA 中所有 DAD_ADA 组成的新整数 PAP_APA.例如:给定 A=3862767A = 3862767 ...
- hdu 3001(三进制状压)
题目 解法 看到这道题,我们就会想到旅行商问题.但是这里每一个点可以经过最多两次,所以我们用三进制表示就好了. 代码 #include <iostream> #include <cs ...
- SQL中IS NOT NULL与!=NULL的区别
平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...
- 【codeforces 798C】Mike and gcd problem
[题目链接]:http://codeforces.com/contest/798/problem/C [题意] 给你n个数字; 要求你进行若干次操作; 每次操作对第i和第i+1个位置的数字进行; 将 ...
- Linux去重命令uniq(转)
注意:需要先排序sort才能使用去重. Linux uniq命令用于检查及删除文本文件中重复出现的行列. uniq可检查文本文件中重复出现的行列. 语法 uniq [-cdu][-f<栏位> ...
- 《Android源代码设计模式解析与实战》读书笔记(八)
第八章.状态模式 1.定义 状态模式中的行为是由状态来决定,不同的状态下有不同的行为.当一个对象的内在状态改变时同意改变其行为,这个对象看起来像是改变了其类. 2.使用场景 1.一个对象的行为取决于它 ...
- arcgis server10.2.2公布地图基础服务的详细步骤
1.直接打开制作好的.mxd文档,比方这里: 2.打开mxd文档之后.打开菜单:file-share as -services 弹出地图公布服务的界面: 点击publish之后,耐心的等待一段时间,地 ...
- Linux 下的时间编程总结
在嵌入式编程中中.常常须要输出系统的当前时间.计算程序的运行时间.使用计时器等.近期也做了不少关于时间的操作.今天就认真总结一下,部分内容是在网上看到的.自己经过验证总结出来. 1.时间的类型 1.格 ...
- Cocos2d-x3.3beta0创建动画的3种方式
1.单独载入精灵对象 渲染效率低,浪费资源,不推荐用该方法.代码例如以下:注:代码仅仅需贴到HelloWorldScene.cpp中就可以. //First,单独渲染每个精灵帧 auto sprite ...
- 【C++/数据结构】顺序表的基本操作
<span style="font-size:18px;"><strong>#pragma once #include <iostream> u ...