资讯专栏INFORMATION COLUMN

js创建对象的几种模式

JaysonWang / 1176人阅读

摘要:组合使用构造函数模式和原型模式推荐例子所有实例共享原型中的属性和方法相同的属性在构造函数中定义。稳妥构造函数模式稳妥对象指的是没有公共属性,而且其方法也不再引用的对象。

1.工厂模式

例子:

</>复制代码

  1. function createPerson(name,age){
  2. var o = new Object();
  3. o.name = name;
  4. o.age = age;
  5. o.sayName = function () {
  6. alert(this.name);
  7. }
  8. return o;
  9. }
  10. var person1 = createPerson("EvanChen",18,"Software Engineer");//创建一个对象

问题:没有解决对象识别问题

</>复制代码

  1. alert(person1 instanceof createPerson)//fasle 会发现其实并不存在一个createPerson类
2.构造函数模式

例子:

</>复制代码

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. this.sayName = function(){
  5. alert(this.name);
  6. }
  7. }
  8. var p1 = new Person("EvanChen",18);//创建一个Person类

用new操作符调用构造函数经历了以下4个步骤:

(1)创建一个新对象

(2)将构造函数的作用域赋给新对象

(3)执行构造函数中的代码

(4)返回新对象

解决了工厂模式兑现识别问题:

</>复制代码

  1. alert(typeof(p1));// Person
  2. alert(p1 instanceof(Person));// true
3.原型模式

例子:

</>复制代码

  1. function Person(){
  2. }
  3. Person.prototype.name = "EvanChen";
  4. Person.prototype.age= 18;
  5. Person.prototype.sayName= function(){
  6. alert(this.name);
  7. }
  8. var p1 = new Person();
  9. p1.sayName(); //"EvanChen"
  10. var p2 = new Person();
  11. p2.sayName(); //"EvanChen"
  12. alert(p1.sayName == p2.sayName); //true

将所有属性和方法都加在Person的prototype属性中,因此新对象具有相同的属性和方法。

4.组合使用构造函数模式和原型模式(推荐)

例子:

</>复制代码

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. this.friends = ["Shelby","Court"];
  5. };
  6. Person.prototype = {
  7. constructor:Person,
  8. sayName:function(){
  9. alert(this,name);
  10. }
  11. }
  12. //Person.prototype.sayName = function(){
  13. // return this.name;
  14. //};
  15. var person1 = new Person("EvanChen",18);
  16. var person2 = new Person("Greg",16);
  17. person1.friends.push("Van");
  18. alert(person1.friends);//"Shelby,Court,Van"
  19. alert(person2.friends);//"Shelby,Court"
  20. alert(person1.friends == person2.friends);//false
  21. alert(person1.sayName == person2.sayName );//true

所有实例共享原型中的属性constructor和方法sayName(),相同的属性在构造函数中定义。

5.动态原型模式(推荐)

例子:

</>复制代码

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. if (typeof this.sayName != "function"){
  5. Person.prototype.sayName = function(){
  6. alert(this.name);
  7. };
  8. }
  9. };
  10. var person1 = new Person("EvanChen",18);
  11. person1.sayName();

在sayName()方法不存在的情况下,才会将它添加到原型中,当原型完成初始化后,能够立即在所有实例中得到共享。

6.寄生构造函数模式

基本思想是:创建一个函数,该函数的作用仅仅是封装对象的代码,然后再返回新构建函数的对象
例子:

</>复制代码

  1. function SpecialArray(){
  2. var values = new Array();//创建数组
  3. values.push.apply(values,arguments);//添加值
  4. values.toPipedString = function () {
  5. return this.join("|");
  6. }//添加方法
  7. return values//返回数组
  8. }
  9. var colors = new SpecialArray("red","blue","green");
  10. alert(colors.toPipedString());//red|blue|green

构造函数返回的对象与构造函数外部创建的对象没有什么不同,因此不能依赖instanceof操作符来确定对象类型。

7.稳妥构造函数模式

稳妥对象指的是没有公共属性,而且其方法也不再引用this的对象。稳妥对象最适合在一些安全的环境中,或者防止数据被其他应用程序删改时使用。

例子:

</>复制代码

  1. function Person(name, age) {
  2. //创建要返回的对象
  3. var o = new Object();
  4. //定义私有变量和函数
  5. o.sayName = function (){
  6. alert(name);
  7. }
  8. return o;
  9. }
  10. var person1 = Person("EvanChen", 18);
  11. person1.sayName();//"EvanChen"

在这种模式创建的对象中,除了使用sayName()方法外,没有其他方法访问name的值。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78910.html

相关文章

  • js 创建对象几种方式

    摘要:可以无数次地调用这个函数,而每次它都会返回一个包含三个属性一个方法的对象构造函数模式原型模式组合使用构造函数模式和原型模式创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。 JS中创建对象的主要模式有 工厂模式 工厂模式抽象了具体创建对象的过程例如 function createPerson(name, age, job){     var o = new Object(...

    seanlook 评论0 收藏0
  • JS创建对象几种设计模式

    摘要:构造函数模式定义构造函数模式是语言创建对象的通用方式。但两种语言用构造函数创建对象的方式略有不同在中没有类的概念,函数即为一等公民,因此,不必显式声明某个类,直接创建构造函数即可,类的方法和属性在构造函数中或原型对象上处理。 工厂模式 定义:工厂模式非常直观,将创建对象的过程抽象为一个函数,用函数封装以特定接口创建对象的细节。通俗地讲,工厂模式就是将创建对象的语句放在一个函数里,通...

    Galence 评论0 收藏0
  • 细节:js 创建对象几种模式举例

    摘要:工厂模式不推荐应该把方法放在函数的外面,避免重复创建该方法定义的不是构建函数,因该使用方法创建实例,而不是方法不要忘记在函数的最后构造函数模式不推荐使用指代,函数无需明确应该把方法放在函数的外面,避免重复创建该方法原型模式不推荐函数中不对属 工厂模式(不推荐) var sayName = function(){ return this.name; }; function cr...

    laznrbfe 评论0 收藏0
  • js面向对象浅析---对象创建几种常见方式

    摘要:前言虽然使用构造函数或者使用对象字面量可以很方便的用来创建一个对象,但这种方式有一个明显的缺点使用一个接口创建多个对象会产生很多冗余的代码。即调用构造函数所创建的那个对象的原型对象好处是可以让所有对象的实例共享他的属性的方法。 前言 虽然使用Object构造函数或者使用对象字面量可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码。因此...

    Invoker 评论0 收藏0
  • JS对象创建几种方式

    摘要:上述每次都需要写可以优化但是此处改变了的属性,故我们需要显示的指出构造函数和原型组合模式二创建空对象前两种方式创建的对象含有原型,最后一种方式创建的对象无原型,是真正意义上的空对象参考资料 一.创建对象的几种方式 1. 使用new关键字创建 var ob = new Object() ob.name = name ob.say = function() {} 2.使用字面量的方式创建 ...

    ixlei 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<