js创建对象的最佳方式

1.对象的定义

ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值、对象或者函数

2.数据属性与访问器属性

  • 数据属性即有值的属性,可以设置属性只读、不可删除、不可枚举等等
  • 访问器属性是用来设置getter和setter的,在属性名前加上”_”(下划线)表示该属性只能通过访问器访问(私有属性),但并不是说添个下划线就把属性变成私有的了,这只是习惯约定的一种命名方式而已。访问器属性没什么用,原因如下:
    var book={
      _year:2004,
      edition:1
    }
    Object.defineProperty(book,"year",{
           get:function(){
              return this._year;
           },
           set:function(newValue){
              if(newValue>2004){
                this._year=newValue;
                this.edition+=newValue-2004;
              }
           }
    });
    book.year=2005;
    alert(book.edition);
    /*
    for(var attr in book){
      showLine(attr + ‘ = ‘ + book[attr]);
    }
    */
    

    高程中使用了上面的示例代码,原理是book对象的属性中_year是数据属性,而year是访问器属性,利用gettter和setter可以插入读写控制,听起来不错。

    但问题是_year和edition都是可枚举的,也就是说用for...in循环可以看到,而访问器属性year却是不可枚举的。应该公开的访问器不公开,却把应该隐藏的私有属性公开了。

    除此之外,这种定义访问器的方式并不是全浏览器兼容的,[IE9+]才完整支持,当然,也有适用于旧浏览器的方式(__defineGetter__()和__defineSetter__()),还是相当麻烦。

    总之,访问器属性没什么用。

3.构造函数

function Fun(){} var fun = new Fun();其中Fun是构造函数,与普通函数没有任何声明方式上的区别,只是调用方式不同(用new操作符调用)而已

构造函数可以用来定义自定义类型,例如:

function MyClass(){
  this.attr = value;//成员变量
  this.fun = function(){...}//成员函数
}

与Java的类声明有些相似,但也有一些差异,比如this.fun只是一个函数指针,因此完全可以让它指向可访问的其它函数(如全局函数),但这样做会破坏自定义对象的封装性

4.函数与原型prototype

  1. 声明函数的同时也创建了一个原型对象,函数名持有该原型对象的引用(fun.prototype)
  2. 可以给原型对象添加属性,也可以给实例对象添加属性,区别是原型对象的属性是该类型所有实例所共享的,而实例对象的属性是非共享的
  3. 访问实例对象的属性时,先在该实例对象的作用域中查找,找不到才在原型对象的作用域中查找,因此实例的属性可以屏蔽原型对象的同名属性
  4. 原型对象的constructor属性是一个函数指针,指向函数声明
  5. 通过原型可以给原生引用类型(Object,Array,String等)添加自定义方法,例如给String添加Chrome不支持但FF支持的startsWith方法:
    var str = ‘this is script‘;
    //alert(str.startsWith(‘this‘));//Chrome中报错
    String.prototype.startsWith = function(strTarget){
      return this.indexOf(strTarget) === 0;
    }
    alert(str.startsWith(‘this‘));//不报错了
    

    注意:不建议给原生对象添加原型属性,因为这样可能会意外重写原生方法,影响其它原生代码(调用了该方法的原生代码)

  6. 通过原型可以实现继承,思路是让子类的prototype属性指向父类的实例,以增加子类可访问的属性,所以用原型链连接之后
    子类可访问的属性
    = 子类实例属性 + 子类原型属性
    = 子类实例属性 + 父类实例属性 + 父类原型属性
    = 子类实例属性 + 父类实例属性 + 父父类实例属性 + 父父类原型属性
    = ...
    

    最终父父...父类原型属性被替换为Object.prototype指向的原型对象的属性

    具体实现是SubType.prototype = new SuperType();可称之为简单原型链方式的继承

5.创建自定义类型的最佳方式(构造函数模式 + 原型模式)

实例属性用构造函数声明,共享属性用原型声明,具体实现如下:

    function MyObject(){
      //实例属性
      this.attr = value;
      this.arr = [value1, value2...];
    }
    MyObject.prototype = {
      constructor: MyObject,//保证子类持有正确的构造器引用,否则子类实例的constructor将指向Object的构造器,因为我们把原型改成匿名对象了
      //共享属性
      fun: function(){...}
    }

6.实现继承的最佳方式(寄生组合式继承)

function object(obj){//返回原型为obj的没有实例属性的对象
  function Fun(){}
  Fun.prototype = obj;
  return new Fun();
}
function inheritPrototype(subType, superType){
  var prototype = object(superType.prototype);//建立原型链,继承父类原型属性,用自定义函数object处理是为了避免作为子类原型的父类实例具有实例属性,简单地说,就是为了切掉除多余的实例属性,可以对比组合继承理解
  prototype.constructor = subType;//保证构造器正确,原型链会改变子类持有的构造器引用,建立原型链后应该再改回来
  subType.prototype = prototype;
}

function SubType(arg1, arg2...){
  SuperType.call(this, arg1, arg2...);//继承父类实例属性
  this.attr = value;//子类实例属性
}
inheritPrototype(SubType, SuperType);

具体解释见代码注释,这种方式避免了SubType.prototype = new SuperType();简单原型链的缺点:

  • 子类实例共享父类实例引用属性的问题(因为原型引用属性是所有实例共享的,建立原型链后父类的实例属性就自然地成了子类的原型属性)。
  • 创建子类实例时无法给父类构造函数传参

7.实现继承的最常用方式(组合继承)

把上面的inheritPrototype(SubType, SuperType);语句换成:

SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

这种方式的缺点是:由于调用了2次父类的构造方法,会存在一份多余的父类实例属性,具体原因如下:

第一次SuperType.call(this);语句从父类拷贝了一份父类实例属性给子类作为子类的实例属性,第二次SubType.prototype = new SuperType();创建父类实例作为子类原型,此时这个父类实例就又有了一份实例属性,但这份会被第一次拷贝来的实例属性屏蔽掉,所以多余。

时间: 2024-12-17 13:26:14

js创建对象的最佳方式的相关文章

js 创建对象的多种方式

参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name obj.getName = function() { console.log(this.name) } return obj} var person1 = createPerson('jack') 缺点:对象无法识别,所有实例都指向同一个原型 构造函数模式 1234567 function Perso

js创建对象的多种方式及优缺点

在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染.所以最好的方式就是存储到对象中.下面能我就给大家介绍几种创建对象的方式,并且给大家说一下他们的优缺点 方式一:对象字面量 var obj={ name:"赵云", type:"突进", skill:"抢人头" } 缺点:只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高 方式二:

js创建对象的四种方式以及消耗时间比较

// Property-less object console.time('zoop1'); var zoop = (function (numObjects) { var pooz = Object.create(null); for(var i = 0; i< numObjects; i++) { pooz[i] = Object.create(null); } return pooz; })(1000000); console.timeEnd('zoop1'); // Using Obje

js创建对象

js创建对象的方法 1.使用new操作符后跟Object构造函数 var person = new Object(); person.name='Nick'; person.age = 29; 2.使用对象字面量表示法 var person = { name:'Nick', age : 29 }; 3.Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参

js对象的创建方式

js对象的创建方式: js也具有OOP编程思想,了解js对象,可以进一步了解js是如何面向对象编程的. js的创建对象方式: 1.   Object var a=new Object();a.name="jack";a.age=20;a.sayName=function () { console.log(this.name);} a.sayName();//打印jack 2.  字面量 var b={name:"rose",age:20,sayName:functi

[ jquery 文档处理 prepend(content|fn) ] 此方法用于向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式

向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,keywor

Js创建对象的方法及原型链的分析

一.JS创建对象的几种方式 最近在看javascript高级程序设计,其中对对象的创建做了具体的阐述,可以进行总结一下. 第1种模式:工厂方式 var sayHello=function(){ return "Hello"; }; function student(){ var S1 = new Object(); Child.name="小明"; Child.age="18"; Child.sayHello=sayHello; return s

js之对象创建方式

js中对象创建方式有多种,最常见的就是调用Object构造函数,下面我们来列举对象的创建的方式 一.Object构造 var Dog = new Object(); Dog.name = "peter"; Dog.bark =function(){ console.log(" my name is "+Dog.name); } Dog.bark();//输出my name is peter 此方法是最常见的生成方式,但不能指定想要的对象类型 二.字面量构造 var

ASP.NET中处理自定义错误的最佳方式

原文:http://www.cnblogs.com/dudu/p/aspnet_custom_error.html 要在ASP.NET中处理好自定义错误(Custom Errors)首先要抛弃使用web.config\customErrors. <customErrors mode="RemoteOnly" defaultRedirect="/error/error.htm"> <error statusCode="404" r