您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

JavaScript创建对象的四种方式

2024/3/11 3:51:41发布29次查看
这篇文章主要介绍了关于javascript创建对象的四种方式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
关键字object.create; new object(); new fn(); {}
背景此段可跳过不读……
在平时的使用中,创建对象最常用的方式是使用{}直接创建,里面直接写方法和属性即可;但是在一次实践中,将这种方式创建的对象写在另外的js文件中,在html中就不知道怎么使用了,百度许久之后使用了object.create的方式,想不到遇到了新的坑,这种方式只支持es5以上,在低版本中,需要进行兼容处理,现在将这几种创建对象的方式进行整理,以便日后翻阅。
方式一: object.create1. 语法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.彩蛋附赠两张图,也许有用,锵锵锵~~~~
好吧,万一打不开图,图一是说,在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    ==> trueoo.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.nameperson['name']扩展属性时:person.haircolor = 'black';person.getname = function(){};
有人做过测试,这种方式比使用new object()创建对象更快,因为{}是立即求值的,而new object()本质上是方法,既然是方法,就涉及到在原型中遍历该方法,当找到这个方法时,又会产生调用方法必须的堆栈信息,方法调用结束之后,又要释放堆栈信息,所以会慢一些。
总结这是几种常用的创建对象的方式,我比较常用的是方式四和方式二,方式四比较直接快速,方式二经常用来做继承之类;方式一的需要考虑兼容es5的问题,它可以扩展一些新对象的可枚举属性,总感觉和defineproperty有某些联系吧,但是还不太懂,还烦请各位大神多多指教吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!
相关推荐:
浏览器与nodejs的eventloop异同以及部分机制
利用javascript判断浏览器类型
以上就是javascript创建对象的四种方式的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product