欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript创建对象的四种方式

程序员文章站 2022-03-30 22:57:09
...
这篇文章主要介绍了关于JavaScript创建对象的四种方式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

关键字

Object.create; new Object(); new Fn(); {}

背景

此段可跳过不读……
在平时的使用中,创建对象最常用的方式是使用{}直接创建,里面直接写方法和属性即可;但是在一次实践中,将这种方式创建的对象写在另外的js文件中,在HTML中就不知道怎么使用了,百度许久之后使用了Object.create的方式,想不到遇到了新的坑,这种方式只支持ES5以上,在低版本中,需要进行兼容处理,现在将这几种创建对象的方式进行整理,以便日后翻阅。

方式一: Object.create

1. 语法

var newObj = Object.create(proto, propertyObject);
参数:
proto:新创建对象的原型对象
propertyObject: 新创建对象的可枚举属性,相当于Object.defineProperty()中的第二个参数一样
返回值: 新创建的对象

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};

var bb = Object.create(aa, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

结果是:bb可以访问的属性有:
(1)它自身的foo和bar
(2)aa的valA和fnA
且,bb.__proto__ == aa

2.polyfill

对于ES5以下不支持这种方式的浏览器来说,可以用以下方式进行兼容,这也是Object.create的polyfill;

if (typeof Object.create !== "function") {
  Object.create = function (proto, propertiesObject) {
      if (typeof proto !== 'object' && typeof proto !== 'function') {
          throw new TypeError('Object prototype may only be an Object: ' + proto);
      } else if (proto === null) {
          throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
      }
      if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
      function F() {}
      F.prototype = proto;
      return new F();
  };
}

总之,记住一句话,新对象的原型是proto,proto是Object.create的第一个参数

3.彩蛋

附赠两张图,也许有用,锵锵锵~~~~
JavaScript创建对象的四种方式
JavaScript创建对象的四种方式
好吧,万一打不开图,图一是说,在ES5中新增的对象方法有create&keys、defineProperty,String的方法有trim,数组的方法有indexOf、filter&map、foreach。
图二是支持ES5的浏览器,其中Chrome支持还可以,IE只能到IE11才能比较好的支持;

方式二:new 构造函数

这种方式也很常用,尤其是做继承什么的,扩展性和封装性比较好

function Person(){
    this.name = '****';
    this.age = 11,
    this.getAge = function(){}
}

可以使用

var p = new Person();

将p打印出来就是

{
    name: '****';
    age: 11,
    getAge: function(){},
    __proto__: Object
}
pp.constructor == Person  ==> **true**
Person.__proto__ == Function.prototype   ==> **true**

方式三:new Object()

1.创建一个空对象

var obj = new Object();

等价于

var obj = {};

可以继续进行扩展属性和方法

2.

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};
var oo = new Object(aa);

结果是:

oo === aa    ==> true
oo.valA = 2;
console.log(aa.valA)   ==> 2

说明oo是aa的浅拷贝,和对象直接复制一样,我也不知道为什么我要这么测试。。。。

这种方式和new Person有“异曲同工”之处,因为:
Object.__proto__ == Function.protoType
Person.__proto__ == Function.protoType
Object是对象的构造函数,它的原型对象也是Function的prototype

方式四:{}

这种方式叫做:使用对象字面量创建对象,这是最简单的一种方式,也是我经常使用的方法,目的是在于简化创建包含大量属性的对象的过程。

var person = {
   name: '*****',
   age: 11,
   getAge: function(){
    return this.age;
   },
   setAge: function(newAge){
    this.age = newAge;
   } 
}
调用时:
person.name
person['name']
扩展属性时:
person.hairColor = 'black';
person.getName = function(){};

有人做过测试,这种方式比使用new Object()创建对象更快,因为{}是立即求值的,而new Object()本质上是方法,既然是方法,就涉及到在原型中遍历该方法,当找到这个方法时,又会产生调用方法必须的堆栈信息,方法调用结束之后,又要释放堆栈信息,所以会慢一些。

总结

这是几种常用的创建对象的方式,我比较常用的是方式四和方式二,方式四比较直接快速,方式二经常用来做继承之类;方式一的需要考虑兼容ES5的问题,它可以扩展一些新对象的可枚举属性,总感觉和defineProperty有某些联系吧,但是还不太懂,还烦请各位大神多多指教吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

浏览器与NodeJS的EventLoop异同以及部分机制

利用javascript判断浏览器类型

以上就是JavaScript创建对象的四种方式的详细内容,更多请关注其它相关文章!

相关标签: javascript