JavaScript创建对象的方法
为什么80%的码农都做不了架构师?>>>
一、定义类或对象
1.工厂方式
创建对象car
var oCar = new Object;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function(){
alert(this.corlor);
};
创建多个car
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor(); //outputs "red"
car2.showColor(); //outputs "blue"
这个例子中,每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本,事实上,每个对象都共享了同一个函数。
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避开这个问题。
function showColor(){
alert(this.color);
}
function createCar(color, doors, mpg) {
var tempcar = new Object;
tempcar.color = color;
tempcar.doors = doors;
tempcar.mpg = mpg;
tempcar.showColor = showColor;
return tempcar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor(); //outputs "red"
car2.showColor(); //outputs "blue"
从功能上讲,这样解决了重复创建函数对象的问题,但该函数看起来不像对象的方法。所有这些问题引发了开发者定义的构造函数的出现。
2.构造函数方法
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function () {
alert(this.color)
};
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.showColor(); //outputs "red"
oCar2.showColor(); //outputs "blue"
就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,也可以用外部函数重写构造函数,同样,这么做语义上无任何意义。
3.原型方式
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
它解决了前面两种方式存在的两个问题。但并不尽人意。首先,这个构造函数没有参数。使用原型方式时,不能通过构造函数传递参数初始化属性的值,这点很令人计厌,但还没完,真正的问题出现在属性指向的是对象,而不是函数时。考虑下面的例子:
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.drivers = new Array("Mike","Sue");
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue,Matt"
4.混合的构造函数/原型方式
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");
}
Car.prototype.showColor = function () {
alert(this.color);
};
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
现在就更像创建一般对象了。所有的非函数属性都有构造函数中创建,意味着又可用构造函数的参数赋予属性默认值了。因为只创建showColor()函数的一个实例,所以没有内存浪费。
5.动态原型方法
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function () {
alert(this.color);
};
Car._initialized = true;
}
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。
6.混合工厂方式
这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数,只返回另一种对象的新实例。
function Car() {
var tempcar = new Object;
tempcar.color = "red";
tempcar.doors = 4;
tempcar.mpg = 23;
tempcar.showColor = function () {
alert(this.color)
};
return tempcar;
}
与经典方式不同,这种方式使用new运算符,使它看起来像真正的构造函数。
7.采用哪种方式
如前所述,目前使用最广泛的是混合的构造函数/原型方式。些外,动态原型方法也很流行,在功能上与前者等价,可以采用这两种方式中的任何一种。
二、修改对象
1.创建新方法
可以用prototype属性为任何已有的类定义新方法,就像处理自己的类一样。
例:
Array.prototype.indexOf = function(vItem){
for(var i=0;i<this.length;i++){
if(vItem == this[i]){
return i;
}
}
retunr -1;
}
最后,如果想给ECMAScript中的每个本地对象添加新方法,必须在Object对象的prototype属性上定义它。
2.重定义已有方法
就像能给自己的类定义新方法一样,也可重定义已有的方法。函数名只是指向函数的指针,因此可以轻易地使它指向其他函数。
如
Function.prototype.toString = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString()); //outputs "Function code hidden"
转载于:https://my.oschina.net/sheila/blog/389011
JavaScript创建对象的方法相关推荐
- html5创建对象的方法,JavaScript面向对象-使用工厂方法和构造函数方法创建对象...
在上一篇文章中我们介绍了JavaScript简单对象的创建方法,简单js对象的最大问题是由于没有类的约束,无法实现对象的重复利用,并且没有一种约定,在操作时会带来问题.所以人们从设计模式中借用了一种工 ...
- Javascript创建对象几种方法解析
Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通 ...
- JavaScript 中创建对象的方法(读书笔记思维导图)
面向对象(Object-Oriented, OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.而 ECMAScript 中没有类的概念,所以我们可以使用 ...
- javascript创建对象方法总结
javascript创建对象方法的总结. 对象是什么? js中对象是"无序属性的集合,其属性可以包含基本值,对象或者函数",简单来说,它就是一个名值对,有key和value,val ...
- JavaScript创建对象的4种方法
JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是,对象是有特征和行为的,是具体特指的某一个事物.使用对象可以使程序更加整洁 通过Object()方法来创建 Object( ...
- Javascript 创建对象方法的总结
1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object();person.name=& ...
- [转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function ...
- JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
- javascript创建对象的几种方式 .
// 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function createCar(sColor){ var car = new Object(); ...
最新文章
- 洛谷2014选课(树型dp)
- tomcat历史版本新特性_tomcat升级后报错RFC 7230 and RFC 3986
- Apache支持多端口配置处理
- echarts 在两点之间画一条线_凭什么?辛辛苦苦画了三个小时,却换来一句“撕了重画”...
- 【工具】公网临时大文件传输工具
- Andorid开发学习---ubuntu 12.04下搭建超好用的安卓模拟器genymotion 安装卸载virtualbox 4.3...
- 智能机器人及其应用ppt课件_机器人视觉技术在建筑智能化生产中的应用
- ts怎么转换成m3u8直播源_HLS及M3U8介绍
- 多类 SVM 的损失函数及其梯度计算
- oracle11g win10版本,win10系统安装的oracle11g和cloud6.2 创建数据中心报错
- 6. C 语言预处理
- java工程师面试几百问_不是吧?面试被问了几百遍的JVM,你还搞不清楚?
- 高斯烟羽模型matlab程序,高斯烟羽模型的改进及在危化品泄漏事故模拟中的应用...
- 01:电机控制的基本原理
- 【教程6】疯壳·ARM功能手机-中断实验教程
- java学习-veu
- 制作Linux的优盘(usb)启动盘
- 如何将flac转换成mp3
- ValueError: cannot resize this array: it does not own its data
- 最大子序列和问题(动态规划)
热门文章
- 红盟idc技术培训群—安全培训(三)
- Win2008 R2 RemoteApp深度体验之四,RemoteApp程序测试
- ISA2006标准版安装及无人值守安装
- xp系统下访问的两个组策略设置
- 重庆南岸召开总结会,今年将引进30家车联网企业
- 准备把平台挪到linux
- mysql基本操作 [http://www.cnblogs.com/ggjucheng/archive/2012/11/03/2752082.html]
- jQuery获取Text和Value
- HTML5中关于wheel事件兼容性处理
- 如家快捷酒店和星级酒店的区别