手机版

用JavaScript创建对象的模式总结

时间:2021-11-03 来源:互联网 编辑:宝哥软件园 浏览:

用JavaScript创建的对象的模式摘要。

**JavaScript创建对象模式:

对象文字工厂模式构造器模式原型模式结合了构造器和原型模式原型动态模式* *。

大多数面向对象语言都有一个类的概念,通过这个类可以创建多个具有相同方法和属性的对象。虽然javascript在技术上是面向对象的语言,但是javascript没有类的概念,一切都是对象。任何对象都是由现有引用类型创建的特定引用类型的实例。引用类型可以是本机的或用户定义的。

1.对象的文字量。

var person={ name : ' Nicholas ';年龄: ' 22 ';job :软件工程师’say name : function(){ alter(this . name);}}例如,创建一个名为person的对象,并向其中添加三个属性(姓名、年龄、职务)和一个方法(sayName()),其中sayName()方法用于显示this.name(解析为person.name)的值。

对象文字可以用来创建单个对象,但是这种方法有一个明显的缺点:使用同一个接口创建多个对象会产生大量重复的代码。

2.工厂模式。

工厂模式是软件工程领域中众所周知的设计模式。工厂模式抽象了创建具体对象的过程,并使用函数来封装创建具有特定接口的对象的细节。

函数createPerson(姓名、年龄、职务){ var o=new object {o.name=nameo.age=年龄;o.job=jobo . SayName=function(){ alert(this . name);};返回o;} var person 1=creatPerson(' Nicholas ',22岁,'软件工程师');var person2=creatPerson('Greg ',24岁,' student ');函数creatPerson { }可以根据接受的参数构建一个包含所有必要信息的Person对象。你可以无数次调用这个函数,每次它都会返回一个包含三个属性和一个方法的对象。

虽然该模型解决了创建多个相似对象的问题,但没有解决对象识别的问题(即如何知道对象的类型)。

3.构造器模式。

功能人员(姓名、年龄、工作){ this.name=namethis.age=年龄;this.job=jobthis . SayName=function(){ alert(this . name);} }//通过新的操作符var person1=new person ('Nicholas ',22,'软件工程师')创建Person的实例;var person2=新人(‘Greg’,24岁,‘学生’);person 1 . SayName();//Nicholasperson 2 . SayName();//格雷格与工厂模式不同。

没有显示已创建的对象。

属性和方法直接分配给这个对象。

没有退货单。

要创建人员的新实例,必须使用新运算符。调用构造函数的四个步骤:

创建一个新对象。

将构造函数的范围分配给新对象(这指向这个新对象)。

在构造函数中执行代码。

返回新对象。

本例中创建的所有对象都是对象和人的实例。可以通过instanceof运算符进行验证。

警报(对象的第1个人实例);//真构造函数模式也有自己的问题。事实上,sayName方法将在每个实例上重新创建一次。需要注意的是,实例化创建的方法并不相等,下面的代码可以证明这一点。

alert(person 1 . SayName==person 2 . SayName);//false您可以通过将方法作为全局函数移出构造函数来解决这个问题。

功能人员(姓名、年龄、工作){ this.name=namethis.age=年龄;this.job=job}函数SayName(){ alert(this . name);}全局条件下创建的全局函数只能通过Person创建的实例调用,有点名不副实;如果对象需要定义正确的方法,就需要定义很多全局函数,缺少封装。

4.原型模式。

在JavaScript中创建的每个函数都有一个原型属性,它是一个指向对象的指针,包含可以被特定类型的所有实例共享的属性和方法(让对象的所有实例共享它的属性和方法)。

函数Person(){ } Person . prototype . name=' Nicholas ';person . prototype . age=22;Person.prototype.job=“软件工程师”;person . prototype . SayName(){ alert(this . name);};var Person 1=new Person();person 1 . SayName();//Nicholasalert(person 1 . SayName==person 2 . SayName);//true上面的代码已经完成了这些事情:

定义了一个构造函数Person。Person函数自动获取一个原型属性,默认情况下,该属性只包含一个指向Person的构造函数属性。通过Person.prototype添加了三个属性和一个方法

创建一个Person实例,然后在该实例中调用sayName()方法。

使用Person构造函数和Person.prototype的代码创建一个实例作为示例来显示对象之间的关系。

使用Person构造函数和Person.prototype的代码创建一个实例作为示例来显示对象之间的关系。

使用Person构造函数和Person.prototype创建实例的代码为例,展示个对象之间的关系

该图显示了Person构造函数、Person的原型属性和Person的两个实例之间的关系。Person.prototype指向原型对象,Person.prototype.constructor指向返回的Person。除了构造器属性之外,原型对象还包含后来添加的其他属性和方法。Person的两个实例person1和person2都包含一个内部属性,它只指向Person.prototype.

sayName()方法的调用过程:

在person1实例上查找logName()方法,我们发现没有这样的方法,所以我们追溯到person1的原型。

在person1的原型上寻找sayame()方法,如果有这个方法,就调用它。

基于这样的搜索过程,我们可以通过在实例上定义同名的属性来防止实例访问原型上同名的属性。需要注意的是,这不会删除原型上同名的属性,只会阻止实例访问。

函数Person(){ } Person . prototype . name=' Nicholas ';person . prototype . age=22;Person.prototype.job=“软件工程师”;person . prototype . SayName(){ alert(this . name);};var Person 1=new Person();var Person 2=new Person();人员1。名称='格雷格'警报(人员1。name)//Greg来自实例alert(person2.name) //Nicholas来自prototype。使用删除操作符完全删除实例属性。

删除person 1 . name;原型中的Alert(person1.name) //Nicholas使用hasOwnProperty()方法检测实例或原型中是否存在属性。

函数Person(){ } Person . prototype . name=' Nicholas ';person . prototype . age=22;Person.prototype.job=“软件工程师”;person . prototype . SayName(){ alert(this . name);};var Person 1=new Person();var Person 2=new Person();alert(person1,hasown property(' name '));//false person 1 . name=' Greg ' alert (person1 . name)//Greg来自实例alert(person 1,hasown property(' name '));//true alert (person2 . name)//Nicholas来自原型alert(person 2,hasown property(' name '));//false删除person 1 . name;警报(person1.name) //Nicholas来自原型警报(person1,hasown property(' name '));//false下图显示了不同情况下实例和原型之间的关系。

这里写图片描述

简单的原型语法。

function Person(){ } Person . prototype={ name:' Nicholas ',年龄:22,职务:' software Engineer ',say name:function(){ alert(this . name);} };在上面的代码中,构造函数属性不再指向Person,对象的类型不能由构造函数决定。您可以故意将其设置回适当的值,如下所示。

function PeRsoN(){ } PeRsoN . prototype={ constructor : PeRsoN,姓名:' Nicholas ',年龄:22岁,工作:' software Engineer ',say name:function(){ alert(this . name);} };重置构造函数属性将导致其[[可枚举]]属性设置为true。默认情况下,本机构造函数属性是不可枚举的,可以通过使用Object.defineProperty()方法进行更改。

object . definepreproperty(person . prototype,‘constructor’,{ enumerable:false,value : PeRsoN });在原型中查找值的过程是一个搜索,原型对象所做的任何修改都可以立即从实例中反映出来。

var friend=new Person();person . prototype . SayHi=function(){ alert(' hi);}朋友,sayHi();//‘hi’(没问题)person实例是在添加新方法之前创建的,但是由于重写prototype对象后实例和原型之间的连接松散,新添加的方法仍然可以访问。

函数Person(){ } var friend=new Person();person . prototype={ name:' Nicholas ',年龄:22,职务:' software Engineer ',say name:function(){ alert(this . name);} };friend . SayName();//调用friend.sayName()时出错,出现该错误是因为friend指向的原型不包含以该字段命名的属性,如下图所示。

这里写图片描述

原型对象的问题。

原型省略了为构造函数传递初始化参数的步骤,默认情况下所有的力都获得相同的属性值。原型模型最大的问题是它的共享性。当原型模型包含引用类型的属性时,问题更加严重。请看下面的例子。

function PeRsoN(){ } PeRsoN . prototype={ constructor : PeRsoN,姓名:' Nicholas ',年龄:22岁,工作:' software Engineer ',friends 3360[' Shelby ',' Court'],say name:function(){ alert(this . name);} };var Person 1=new Person();var Person 2=new Person();person 1 . friend . push(' Van ');警惕(person 1 . friends);//“谢尔比,法院,范”警报(person 2 . friends);//'谢尔比,法院,范'警报(person 1 . friends==person 2 . friends);//true5。结合使用构造器模式和原型模式。

在构造器模式和原型模式的组合中,构造器用于定义实例属性,原型模型用于定义方法和共享属性。这样,每个实例都将有自己的实例属性副本,同时,它可以共享对方法的引用,从而最大限度地节省内存。

功能人员(姓名、年龄、工作){ this.name=namethis.age=年龄;this.job=jobthis.friends=['Shelby ',' Court '];}Person.prototype={构造函数:Person,say name:function(){ alert(this . name);} } var Person 1=new Person(' Nicholas ',22岁,'软件工程师');var person2=新人(‘Greg’,24岁,‘学生’);person 1 . friend . push(' Van ');警惕(person 1 . friends);//“谢尔比,法院,范”警报(person 2 . friends);//‘谢尔比,法院’警报(person 1 . friends==person 2 . friends);//假警报(person 1 . SayName==person 2 . SayName);//true6,动态原型模式。

原型模式将所有需要的信息封装到构造函数中,并通过if语句判断原型中是否存在属性。如果它不存在(第一次调用构造函数时),则执行if语句中的原型初始化代码。

函数Person(姓名、年龄){ this.name=namethis.age=年龄;this.job=job//方法if(typeof this.sayName!=' function '){ person . prototype . say name=function(){ alert(this . name);};} } var friend=new Person(' Nicholas ',' 22 ','软件工程师');//首次调用构造函数,此时修改原型var person2=new Person('amy ',' 21 ');//此时,sayName()方法已经存在,不会修改原型推荐阅读:

在js中创建对象的常见方式(工厂模式、构造器模式、原型模式)。

以上是边肖介绍的用JavaScript创建对象的模式。希望对大家有帮助!

版权声明:用JavaScript创建对象的模式总结是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。