JS创建对象总结

时间:2022-03-11 11:04:40

javascript创建对象的方法总结

Javascript创建对象

最简单的方法:创建object实例。

JS创建对象总结
var person=new Object();
person.name="Joey";
person.age=28;
person.sayName=function(){
alert(this.name);
};
JS创建对象总结

或者使用字面量的形式会简洁一些

var person={
name:"Joey",
age:28,
sayName:function(){alert(this.name);}
};

缺点:如果要创建多个实例会产生大量重复代码,最好只用于创建单个对象。

工厂模式

ECMAscript中是没有类的,由于利用Obeject创建多个实例代码量太多,于是考虑使用一个函数将创建对象的过程封装起来。

JS创建对象总结
function creatPerson(name,age){
var o=new Object();
o.name=name;
o.age=age;
o.sayName=function(){
alert(this.name)};
}
return o;
var person1=creatPerson("Joey",28);
var person2=creatPerson("Mary",20);
JS创建对象总结

在creatPerson函数中,实例化了一个对象o,给了o三个属性(sayName属性对应的是一个函数)。通过传入函数的参数来为属性赋值,最终范围对象o,就像一个工厂,把原料(参数)投进去,内部进行赋值,然后把成品(对象o)返回给你。利用这种模式,可以直接调用该函数,控制不同的参数来创建许多相似的实例,非常方便。

缺陷:虽然工厂模式可以创建多个相似对象,可是没有解决对象识别的问题,在java/C#中,我们在通常会创建很多类,然后对操作不同的实例,然而在上述工厂模式中,无论定义多少个函数,实例化的对象都是Obeject类型。

构造函数模式

在var o=new Object();这个语句中,使用了new操作符调用了Object()构造函数创建了新的Object类型对象,那么我们能不能自定义构造函数来创建自定义类型的对象呢?

JS创建对象总结
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
alert(this.name);
};
}
var person1=new Person("Joey",28);
var person2=new Person("Mary",20);
JS创建对象总结

这个例子中Person()函数取代了工厂模式中的creatPerson()函数,两者不同之处在于:

1.没有显式创建对象。

2.将属性和方法赋给了this对象。

3.没有return语句。

ps:在构造函数中的this指向全局对象(window)

当调用构造函数实例化对象时,必须使用new操作符,此时会经历以下步骤:

1.创建一个新对象。

2.将构造函数的作用域赋给新对象(此时this指向了这个新对象)。

3.执行构造函数中的代码(为新对象添加属性)。

4.返回新对象。

person1和person分别保存着Person的不同实例,这两个对象都有一个constructor(构造函数)属性,指向Person。constructor属性用来标识对象类型,如果要检测对象类型,可以使用instanceof操作符。

alert (person1 instanceof Object);//true
alert (person1 instanceof Person);//true
alert (person2 instanceof Object);//true
alert (person2 instanceof Person);//true

创建自定义构造函数意味着将来可以将它的实例标识为一种特定的类型;这正是构造函数模式的优点。

ps:person1和person2同时是Object的实例,是因为所有对象继承自Object。

构造函数虽然好用,但是也有缺点,使用构造函数的主要问题,就是每个方法要在每个实例上重新创建一遍。

alert(person1.sayName==person.sayName);//false

从上面的代码可以看出person1和person2中的sayName方法是不等的。

原型模式

每个函数都有一个prototype属性,指向一个对象,该对象包含可以由特定类型的所有实例共享的属性和方法。关于prototype在此将不详细叙述(复杂QWQ)

调用构造函数创建一个新实例之后,实例类部将包含一个指针_proto_指向构造函数的prototype对象,实现共享。

JS创建对象总结
function Person()
{}
Person.prototype.name="Joey";
Person.prototype.age=28;
Person.prototype.sayName=function(){
alert(this.name);
};
var person1=new Person();
var person2=new Person();
person2.sayName();//"Joey"
person1.sayName();//"Joey"
JS创建对象总结

上例写出了原型模式的基本用法,多用于共享属性和方法。

缺点:1.无法传递参数,所有实例获得的值都一样。

2.若共享的属性为引用类型,一旦改变一个实例中的引用类型值,会影响其他实例中的引用类型属性,这就是为什么很少单独使用原型模式的原因。

ps:若在实例中添加同名基本类型的值,会屏蔽原型中的对应属性。

最常用:组合模式

组合使用构造函数和原型模式来创建自定义类型。

构造函数用于定义实例属性,而原型模式用于定义方法和共享的属性。

JS创建对象总结
function Person(name,age){
this.name=name;
this.age=age;
this.friends=["W","M"];
}
Person.prototype.sayName=function(){
alert(this.name);
};
var person1=new Person("Joey",28);
var person2=new Person("Mary",20);
person1.friends.push("van");
alert(person1.friends);//"Van","W","M"
alert(person2.friends);//"W","M"
alert(person1.sayName===person2.sayName);//true
JS创建对象总结

上述代码中,构造函数模式中重复创建函数的缺点没有了,sayName()函数在原型中创建。引用类型则被声明在了构造函数里面,作为实例特有的属性,实例属性也可以利用参数传值进行初始化。

这是定义自定义类型,使用最广泛的方法,也是大家默认的一种模式。

JS创建对象总结的更多相关文章

  1. JS创建对象篇

    JS创建对象篇 Object构造函数创建 var person = new Object(); person.name = "Tom"; person.age = 10; pers ...

  2. 使用js创建对象

    1.js创建关键字 //使用 New 关键字 function person(name,age){ this.name=name; this.age=age; } $(function(){ var ...

  3. javascript(js)创建对象的模式与继承的几种方式

    1.js创建对象的几种方式 工厂模式 为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式. function createPerson(na ...

  4. JS 创建对象总结

    狭义:new 构造函数. (注:在JS中创建对象只有一种方式,就是new 构造函数.其中字面量的方式是一种语法糖,本质仍然是new 构造函数) 广义:工厂模式(解决复杂度) 构造函数模式(解决复杂度, ...

  5. JS创建对象的方式有几种

    相信但凡作为一个前端工程师,都被面试到过这个面试题目,HR考察的就是对oop思想的理解. 作为一个从后端转过来的怂逼,oop一直是心中的永远的痛啊. 这几天一直在通读js高级程序设计,重复理解js创建 ...

  6. JS 创建对象(常见的几种方法)

    贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return th ...

  7. js 创建对象的多种方式

    参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name o ...

  8. 浅谈 JS 创建对象的 8 种模式

    1.Object 模式 var o1 = {};//字面量的表现形式 var o2 = new Object; var o3 = new Object(); var o4 = new Object(n ...

  9. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  10. JS创建对象

    本人常用的创建对象的方式,仅供参考,欢迎吐槽,谢谢! 创建对象1.对象字面量,即使用大括号,如下: (function(){ var obj = { id: 1, desc: '创建对象测试开始啦!' ...

随机推荐

  1. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  2. es6分享——变量的解构赋值

    变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...

  3. SBT 构建scala eclipse开发

    scala eclipse sbt 应用程序开发 搭建Eclipse开发Scala应用程序的一般步骤 一.环境准备: 1.Scala : http://www.scala-lang.org/ 2.Sc ...

  4. Java中的return

    比如你写了一个叫getInt的类public int getInt(){ //这个类的意思就是一个具有返回值类型为int的类了 //通常如果不需要返回值的话 这里就写void....//你的具体代码r ...

  5. 集群提交spark任务命令

    >>spark-submit --class WordCount  DataMining.jar /dept_ana/part-00000 /dept_ana/output/wordCou ...

  6. query中对应的OnSetText和onGetText事件

    今天在看代码的时候遇到一个问题,query中的某个字段和在表中显示的不是一个值,我觉得很奇怪,于是找了很久,才知道为什么,原来是query中的OnSetText和onGetText事件在作怪,经过一番 ...

  7. linux设置预留端口号,防止监听端口被占用 ip_local_reserved_ports

    1. 背景 linux服务器启动时,会对指定的端口进行监听bind,如果同一个机器上这个端口已经被使用,则监听失败,程序无法启动. linux客户端连接服务器accept时,系统会分配本地临时端口用于 ...

  8. 学习笔记58—3D杯子设计

    软件下载:http://www.i3done.com/ 界面如下: 3D杯子设计步骤(参考:http://www.i3done.com/news/video/402.html): 生成杯体 1.点击基 ...

  9. DELPHI中自定义消息的发送和接收

    DELPHI中的消息处理机制 Delphi是Borland公司提供的一种全新的WINDOWS编程开发工具.由于它采用了具有弹性的和可重用的面向对象Pascal(object-orientedpasca ...

  10. sed 指定行范围匹配(转)

    sed -n '5,10{/pattern/p}' file sed是一个非交互性性文本编辑器,它编辑文件或标准输入 导出的文件拷贝.标准输入可能是来自键盘.文件重定向.字符串或变量,或者是一个管道文 ...