转载：javascript中定义兑现改的5种方式

本文转载自： http://www.phpfuns.com/scripts/javascript/five-method-define-javascript-object.shtml

JavaScript中定义对象的5种方式（JavaScript中没有类的概念，只有对象）

i）基于已有对象扩充其属性和方法

var object = new Object();
object.name = "zhangsan"; // 添加name属性
object.sayName = function(name){//添加sayName方法this.name = name;alert(this.name);
};
object.sayName("kyle");//调用sayName方法，name属性被修改为kyle，浏览器将打印kyle

最简单的一种方式，使用起来并不方便，适合于临时需要一个对象。

ii）工厂方式创建对象

不带参数的工厂方法：

//工厂方法
function createObject(){var object = new Object();        //创建一个对象object.name = "zhangsan";        //为该对象添加一个name属性object.password = "123";        //为该对象添加一个password属性object.get = function(){        //为该对象添加一个get方法alert(this.name+","+this.password);};return object;    //返回该对象
}
var object1 = createObject();        //调用createObject工厂方法创建对象object1
var object2 = createObject();        //调用createObject工厂方法创建对象object2
object1.get();                        //调用对象get方法
object2.get();                        //调用对象get方法

带参数的工厂方法：

function createObject(name, password) {var object = new Object();object.name = name;object.password = password;object.get = function() {alert(this.name + "," + this.password);};return object;
}
var object1 = createObject("zhangsan", "123");
var object2 = createObject("lisi", "456");
object1.get();
object2.get();

上面两种不带参数和带参数的工厂方法缺点：

每创建一个对象，内存中就创建一个get方法，比较浪费内存，且影响性能。而我们的期望是，创建两个不同的对象，它们的属性是不一样的，但方法是共用的。所以接下来我们需要改进createObject工厂方法。

改进的工厂方法：

// 把get()放在外面实现共用
function get() {alert(this.name + "," + this.password);
}function createObject(name, password) {var object = new Object();object.name = name;object.password = password;object.get = get;return object;
}
var object1 = createObject("zhangsan", "123");
var object2 = createObject("lisi", "456");
object1.get();
object2.get();

将get方法定义在createObject函数外面，这样每创建一个对象，get方法都是共用的。让一个函数对象被多个对象所共享，而不是每一个对象都拥有一个函数对象。

iii）构造函数方式创建对象

不带参数的构造函数

function Person(){//在执行第一行代码前，js引擎会为我们生成一个对象this.name = "zhangsan";this.password = "123";this.getInfo = function(){alert(this.name+","+this.password);};//此处有一个隐含的return语句，用于将之前生成的对象返回（也是跟工厂方式不一样的地方）
}
var p1 = new Person();
p1.getInfo();

带参数的构造函数

function Person(name, password) {this.name = name;this.password = password;this.getInfo = function() {alert(this.name + "," + this.password);};
}
var p1 = new Person("zhangsan", "123");
var p2 = new Person("lisi", "456");
p1.getInfo();
p2.getInfo();

iv）原型（prototype）方式创建对象

prototype是Object对象里面的一个属性，

function Person() {
}
Person.prototype.name = "zhangsan";
Person.prototype.password = "123";
Person.prototype.getInfo = function() {alert(this.name + "," + this.password);
};
var p1 = new Person();
var p2 = new Person();
p1.name = "kyle";// 对象生成之后再去改变属性 p1.getInfo(); p2.getInfo();

单纯地使用原型方式有两个问题：第一，你无法在构造函数中为属性赋初值，只能在对象生成之后再去改变属性值。

function Person() {
}
Person.prototype.name = new Array();
Person.prototype.password = "123";
Person.prototype.getInfo = function() {alert(this.name + "," + this.password);
};
var p1 = new Person();
var p2 = new Person();
p1.name.push("zhangsan");
p1.name.push("lisi");
p1.password = "456";
p1.getInfo();
p2.getInfo();

浏览器将会打印：zhangsan，lisi，456和zhangsan，lisi，123.

如果使用原型方式创建对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。所以单纯地使用原型方式是不行的，还需要结合其他方式。接下来我们会继续介绍。

使用原型+构造函数方式来定义对象

function Person() {this.name = new Array();this.password = "123";
}
Person.prototype.getInfo = function() {alert(this.name + "," + this.password);
};
var p1 = new Person();
var p2 = new Person();
p1.name.push("zhangsan");
p2.name.push("lisi");
p1.getInfo();
p2.getInfo();

使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法，这是一种比较好的方式。

v）动态原型方式

function Person() {this.name = "zhangsan";this.password = "123";if (typeof Person.flag == "undefined") {alert("invoked");Person.prototype.getInfo = function() {alert(this.name + "," + this.password);};Person.flag = true;}
}
var p1 = new Person();
var p2 = new Person();
p1.getInfo();
p2.getInfo();

在动态原型方式中，在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。上面代码在第一次创建对象时，首先通过一个判断语句，看flag属性是否已经定义，若没有定义，则通过原型方式添加getInfo方法，然后将flag设置为true，那么当第二次创建对象时，if语句判断为假，跳过执行。这样就达到了我们所期望的结果，创建的对象属性是互不干扰的，而对象的方法是共享的。

转载于:https://www.cnblogs.com/zjfazc/archive/2012/10/12/2721384.html

转载：javascript中定义兑现改的5种方式相关推荐

JavaScript中字符串连接/拼接的四种方式
JavaScript中连接字符串的方式有4种,分别是使用加号运算符连接.使用${}配合反引号连接.使用concat()函数连接.使用join()函数连接. 1. 使用加号运算符示例代码如下: let ...
JavaScript中查找指定字符串的几种方式
1.indexOf() 使用indexOf()方法查找字符串.使用此方法如果能找到指定的字符串,返回字符串位置的索引,如果找不到,则返回-1.下面例子结果为2,即找到c字符串,在索引为2的位置. co ...
JavaScript中定义对象的几种方式
JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下5种方式(附加改进方式): 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型(&q ...
在JavaScript中定义枚举的首选语法是什么？ [关闭]
在JavaScript中定义枚举的首选语法是什么? 就像是: my.namespace.ColorEnum = {RED : 0,GREEN : 1,BLUE : 2 }// later onif(c ...
1.JavaScript中定义数组的两种主要方式
JavaScript中定义数组的两种主要方式(new Array()和[]方式) new Array() ①可以用像JAVA的那种写法的方式定义,如 var arr = new Array() 这样定 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
在java程序中定义的类有两种成员_java试题急需答案谢谢！！！
三.填空(每小题2分,共10分)1．在Applet中,创建一个具有10行45列的多行文本区对象ta的语句为:2．创建一个标识有"关闭"字样的标签对象gb的语句为.3．方法是一种仅有 ...
JavaScript中的ReferenceError和TypeError两种错误的区别
转自JavaScript中的ReferenceError和TypeError两种错误的区别作为前端工作人员,在调试JavaScript程序的时候经常遇到两个错误:ReferenceError和Typ ...
Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串模板字面量 x-template 内联模板 render ...

转载：javascript中定义兑现改的5种方式

转载：javascript中定义兑现改的5种方式相关推荐

最新文章

热门文章