Web前端工程师应该知道的JavaScript创建对象的方式

Web前端工程师应该知道的JavaScript创建对象的方式,第1张

今天小编要跟大家分享的文章是关于Web前端工程师应该知道的JavaScript

创建对象的方式。JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。下面小编为大家介绍一些非常经典的创建对象的方式,他们也各有优缺点。我们一起来看一看吧!

1、工厂模式

functioncreatePerson(name,job){varo=newObject()

o.name=name

o.job=job

o.sayName=function(){console.log(this.name)

}returno

}varperson1=createPerson('Jiang','student')varperson2=createPerson('X','Doctor')

可以无数次调用这个工厂函数,每次都会返回一个包含两个属性和一个方法的对象

工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题,即不能知道一个对象的类型

2、构造函数模式

functionPerson(name,job){this.name=namethis.job=jobthis.sayName=function(){console.log(this.name)

}

}varperson1=newPerson('Jiang','student')varperson2=newPerson('X','Doctor')

没有显示的创建对象,使用new来调用这个构造函数,使用new后会自动执行如下 *** 作

·创建一个新对象

·这个新对象会被执行[[prototype]]链接

·这个新对象会绑定到函数调用的this

·返回这个对象

使用这个方式创建对象可以检测对象类型

person1instanceofObject//trueperson1instanceofPerson//true

但是使用构造函数创建对象,每个方法都要在每个实例上重新创建一次

3、原型模式

functionPerson(){

}

Person.prototype.name='Jiang'Person.prototype.job='student'Person.prototype.sayName=function(){console.log(this.name)

}varperson1=newPerson()

将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法,不必在构造函数中定义对象实例信息。

原型是一个非常重要的概念,在一篇文章看懂proto和prototype的关系及区别中讲的非常详细

更简单的写法

functionPerson(){

}

Person.prototype={

ame:'jiang',

job:'student',

sayName:function(){console.log(this.name)

}

}varperson1=newPerson()

将Person.prototype设置为等于一个以对象字面量形式创建的对象,但是会导致.constructor不在指向Person了。

使用这种方式,完全重写了默认的Person.prototype对象,因此.constructor也不会存在这里

Person.prototype.constructor===Person//false

如果需要这个属性的话,可以手动添加

functionPerson(){

}

Person.prototype={

constructor:Person

ame:'jiang',

job:'student',

sayName:function(){

console.log(this.name)

}

}

不过这种方式还是不够好,应为constructor属性默认是不可枚举的,这样直接设置,它将是可枚举的。所以可以时候,Object.defineProperty方法

Object.defineProperty(Person.prototype,'constructor',{

enumerable:false,

value:Person

})

缺点

使用原型,所有的属性都将被共享,这是个很大的优点,同样会带来一些缺点

原型中所有属性实例是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性也勉强可以,毕竟实例属性可以屏蔽原型属性。但是引用类型值,就会出现问题了

functionPerson(){

}

Person.prototype={

ame:'jiang',

friends:['Shelby','Court']

}varperson1=newPerson()varperson2=newPerson()

person1.friends.push('Van')console.log(person1.friends)//["Shelby","Court","Van"]console.log(person2.friends)//["Shelby","Court","Van"]console.log(person1.friends===person2.friends)//true

friends存在与原型中,实例person1和person2指向同一个原型,person1修改了引用的数组,也会反应到实例person2中

4、组合使用构造函数模式和原型模式

这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点

使用此模式可以让每个实例都会有自己的一份实例属性副本,但同时又共享着对方法的引用

这样的话,即使实例属性修改引用类型的值,也不会影响其他实例的属性值了

functionPerson(name){this.name=namethis.friends=['Shelby','Court']

}

Person.prototype.sayName=function(){console.log(this.name)

}varperson1=newPerson()varperson2=newPerson()

person1.friends.push('Van')console.log(person1.friends)//["Shelby","Court","Van"]console.log(person2.friends)//["Shelby","Court"]console.log(person1.friends===person2.friends)//false

5、动态原型模式

动态原型模式将所有信息都封装在了构造函数中,初始化的时候,通过检测某个应该存在的方法时候有效,来决定是否需要初始化原型

functionPerson(name,job){//属性

this.name=namethis.job=job//方法

if(typeofthis.sayName!=='function'){

Person.prototype.sayName=function(){console.log(this.name)

}

}

}varperson1=newPerson('Jiang','Student')

person1.sayName()

只有在sayName方法不存在的时候,才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。

此后原型已经完成初始化,不需要在做什么修改了

这里对原型所做的修改,能够立即在所有实例中得到反映

其次,if语句检查的可以是初始化之后应该存在的任何属性或方法,所以不必用一大堆的if语句检查每一个属性和方法,只要检查一个就行

6、寄生构造函数模式

这种模式的基本思想就是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新建的对象

functionPerson(name,job){varo=newObject()

o.name=name

o.job=job

o.sayName=function(){console.log(this.name)

}returno

}varperson1=newPerson('Jiang','student')

person1.sayName()

这个模式,除了使用new *** 作符并把使用的包装函数叫做构造函数之外,和工厂模式几乎一样

构造函数如果不返回对象,默认也会返回一个新的对象,通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值

7、稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性,而且其方法也不引用this。

稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new),或防止数据被其他应用程序改动时使用

稳妥构造函数模式和寄生模式类似,有两点不同:一是创建对象的实例方法不引用this,而是不使用new *** 作符调用构造函数

functionPerson(name,job){varo=newObject()

o.name=name

o.job=job

o.sayName=function(){console.log(name)

}returno

}varperson1=Person('Jiang','student')

person1.sayName()

和寄生构造函数模式一样,这样创建出来的对象与构造函数之间没有什么关系,instanceof *** 作符对他们没有意义。

以上就是小编跟大家分享的关于JavaScript

创建对象的方式的文章,希望本篇文章能够对正在从事web相关工作的小伙伴们有所帮助。想要了解更多web相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利!

*声明:内容与图片均来源于网络(部分内容有修改),版权归原作者所有,如来源信息有误或侵犯权益,请联系我们删除或授权事宜。

1.对象的字面量的形式var obj = {}

2.new 的方式来调用构造函数的形式

Object是个构造函数var obj = new Object()obj.name = '黄忠'

3.工厂方法

function fn (name) {

 // 1. 创建一个空对象

 var obj = new Object()

 // 2. 给对象添加属性和方法

 obj.name = name

 // 3. 返回一个obj对象

 return obj

}

4.构造函数

帕斯卡命名 第一个单词的第一个字母大写,后续的每一个单词的第一个字母都大写

通过this动态的给构造函数添加属性和方法

function Hero(name, weapon, equipment, blood) {

    // this 动态的给对象增加成员

    // this 指向了当前对象

    this.name = name

    this.weapon = weapon

    this.equipment = equipment

    this.blood = blood

    this.attack = function () {

      console.log(this.name + ':攻击')

    }

    this.run = function () {

      console.log(this.name + ': 加速跑')

    }

  }

  var hero1 = new Hero('黄忠', '弓箭', ['头盔', '靴子'], 100)

JavaScript 三种创建对象的方法 JavaScript中对象的创建有以下几种方式:

(1)使用内置对象

(2)使用JSON符号

(3)自定义对象构造

一、使用内置对象JavaScript可用的内置对象可分为两种:

1,JavaScript语言原生对象(语言级对象),如String、Object、Function等;

2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象。如:

代码如下:

var str = new String("实例初始化String")

var str1 = "直接赋值的String"

var func = new Function("x","alert(x)")//示例初始化func

var o = new Object()//示例初始化一个Object二、使用JSON符号

(i)何谓JSON ?

JSON (JavaScript Object Notation)即JavaScript对象命名,是一种轻量级的数据交换格式,易于阅读和编写,同时也易于及其解析和生成。它基于《JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999》的一个子集。JSON是完全独立于语言的文本格式,因此成为数据交换的理想格式。

JSON作为JavaScript的一个自己,同时ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的语言都提供支持,使得JSON成为Ajax开发的首选方案。

JSON有两种构建方式,一种是采用简单的“键/值对”的集合,在不同的语言中被理解为对象、记录、结构、字典、哈希表、有键列表,或者关联数组等,另一种采用有序的值列表,大部分语言把它理解为数组。

常用的创建方式是第一种,即采用“键/值对”集合的形式。在这种形式下,一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号),“ ‘键/值' 对”之间使用“,”(逗号)分隔。

JSON具有以下特点:(1)简单格式化的数据交换;(2)易于人们的读写习惯;(3)易于机器的分析和运行。

在JavaScript中,JSON被理解为对象。通过字符串形式的JSON,数据可以很方便地解析成JavaScript独享,并进行数据的读取传递。通过JSON,在一定程度上客服了JavaScript对象无法作为参数系列化传递的问题。

1,简单的JSON

{name:"刘德华",age:"25",sex:"男"}

2,JSON值的类型

JSON的值可以是简单的数据类型,例如数字、浮点、字符等,也可以是数组及对象。例如以数组作为member键值的JSON:

{member:[{name:"刘德华"},{name:"郭富城"},{name:"张学友"},{name:"黎明"}]}

{

book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}],

author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}]

}

3,在JavaScript中使用JSON

JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或者工具包,JavaScript默认将JSON当做一个对象处理。

将对象传递给一个变量,例如:

代码如下:

var somebooks = {

book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}],

author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}]

}JSON的每个“键”相当于对象的属性,例如访问book中的第一个条目,在JavaScript中,就可以简单地使用“somebooks.book[0].name”来获取“三国演义”这个值。

我们不但可以将一个JSON字符串转化为对象,反过来将一个对象“编译”为一个JSON字符串,以方便JavaScript中的对象的传输。例如:

代码如下:

var Animals = new Object()

Animals.name = "dog"

Animals.sex = "Male"

Animals.age = "2"Animals对象无法被序列化传输,将Animals对象转化为JSON字符串,也就是“{name:"dog",sex:"Male",age:"2"}”。这样,把该JSON字符串作为HTTP请求的一个参数传递,从而达到序列化传输Animals对象的目的。

(ii)JSON通过字符串形式来表达JavaScript的对象。如:

代码如下:

var myObject = {nickname:"my girlfried",name:"big pig"}JSON实际上充当了一种在JavaScript对象和字符串之间实现相互转换的协议。由于JSON的“外表”可以看成但村的字符串,因此JSON在JavaScript的对象传输方面可以起到一定的作用。例如把对象strObject转换成字符串后进行传输,在达到目的地后通过eval方法将其还原成对象:

代码如下:

function test (o)

{

alert (o.name)

}

var strObject = '{nickname:"my girlfriend",name:"big pig"}'

test (eval("(" + strObject + ")"))三、自定义对象构造

创建高级对象构造有两种方式:使用“this”关键字构造、使用原型prototype构造。如:

代码如下:

//使用this关键字定义构造的上下文属性

function Girl()

{

this.name = "big pig"

this.age = 20

this.standing

this.bust

this.waist

this.hip

}

//使用prototype

function Girl(){}

Girl.prototype.name = "big pig"

Girl.prototype.age = 20

Girl.prototype.standing

Girl.prototype.bust

Girl.prototype.waist

Girl.prototype.hip

alert(new Girl().name)上例中的两种定义在本质上没有区别,都是定义“Girl”对象的属性信息。“this”与“prototype”的区别主要在于属性访问的顺序。如:

代码如下:

function Test()

{

this.text = function()

{

alert("defined by this")

}

}

Test.prototype.test = function()

{

alert("defined by prototype")

}

var _o = new Test()

_o.test()//输出“defined by this”当访问对象的属性或者方法是,将按照搜索原型链prototype chain的规则进行。首先查找自身的静态属性、方法,继而查找构造上下文的可访问属性、方法,最后查找构造的原型链。

“this”与“prototype”定义的另一个不同点是属性的占用空间不同。使用“this”关键字,示例初始化时为每个实例开辟构造方法所包含的所有属性、方法所需的空间,而使用“prototype”定义,由于“prototype”实际上是指向父级的一种引用,仅仅是个数据的副本,因此在初始化及存储上都比“this”节约资源。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11247512.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存