脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript中创建对象方式

详细分析Javascript中创建对象的四种方式

 更新时间：2016年08月17日 09:30:12   投稿：daisy  
这篇文章详细介绍了Javascript中创建对象的几种方式与每种方式的优缺点，其中包括工厂模式、构造函数模式、原型模式和组合使用构造函数模式和原型模式，有需要的小伙伴们一起来学习学习吧。

前言

使用Javascript创建对象的方式有很多，现在就来列举一下其中的四种方式，并且罗列出了每种方式的优缺点，可以让大家进行选择使用，下面来看看。

工厂模式

 function createPerson(name, age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj; //一定要返回，否则打印undefined:undefined
 }
 var person1 = new createPerson('Young',18);
 console.log(person1.name + ':' + person1.age);

优点：工厂模式可以解决创建多个相似对象

缺点：没有解决对象识别问题（怎样确定一个对象的类型）

构造函数模式

 function Person(name,age){
 this.name = name;
 this.age = age;
 }
 var person1 = new Person('Young',18);
 console.log(person1.name + ':' + person1.age);

在说优缺点之前，先来说说她本身的一点小故事吧

将构造函数当做函数使用

 function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 return this.name;
 }
 }
 
 //当做构造函数使用
 var person1 = new Person('Young', 18);
 person1.sayName();
 console.log(person1.name + ':' + person1.age);
 
 //当做普通函数调用
 Person('Wind', 18);
 console.log(window.sayName());
 
 //在另一个作用域中调用
 var obj = new Object();
 Person.call(obj, 'bird', 100);
 console.log(obj.sayName());

构造函数优缺点

优点：可以将它的实例标识为一种特定类型

缺点：每个方法都要在每个实例上重新创建一遍。当然你也可以这样改：

 function Person(name, age){
 this.name = name;
 this.age = age;
 this.sayName = sayName;
 }
 function sayName(){
 return this.name;
 }

改为调用全局函数，这样一来毫无封装性可言。。。接下来的原型模式可以弥补这个的不足

原型模式

 function Person(){
 
 }
 Person.prototype.name = 'Young';
 Person.prototype.age = 18;
 Person.prototype.sayName = function(){
 return this.name;
 }
 
 var person1 = new Person();
 console.log(person1.sayName());
 var person2 = new Person();
 console.log(person1.sayName());
 alert(person1.sayName === person2.sayName);
 //person1和person2访问的是同一组属性的同一个sayName()函数

虽然可以通过对象实例访问保存在原型中的值，但却不能通过实例对象重写原型中的值

 function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 person1.name='Wind';
 
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 alert(person1.sayName==person2.sayName);//true

在我们调用person1.sayName的时候，会先后执行两次搜索，解析器先确定实例person1是否有sayName的属性，有则调用自己的属性，没有则搜索原型中的属性。

 function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var person1=new Person();
 var person2=new Person();
 
 person1.name='Wind';
 console.log(person1.sayName());//Wind
 console.log(person2.sayName());//Young
 
 delete person1.name;
 console.log(person1.sayName());//Young
 console.log(person2.sayName());//Young

使用hasOwnPropertyType方法可以检测一个属性是存在与原型中还是存在于实例中，该方法是从Object继承来的，实例中为true，原型中为false。

枚举对象上的实例属性用Object.keys()方法

 function Person(){
 
 }
 Person.prototype.name='Young';
 Person.prototype.age=18;
 Person.prototype.sayName=function(){
 return this.name;
 }
 
 var keys=Object.keys(Person.prototype);
 console.log(keys);//["name", "age", "sayName"]

原型模式优缺点

优点：不用每个方法都要在每个实例上重申一遍

缺点：很少有人单独使用原型模式地。。问题详列

 function Person(){
 
 }
 Person.prototype={
 constructor:Person,
 name:'Young',
 age:18,
 friends:['Big','Pig'],
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person();
 var p2=new Person();
 p1.friends.push('Mon');
 console.log(p1.friends);//["Big", "Pig", "Mon"]
 console.log(p2.friends);//["Big", "Pig", "Mon"]

正是因为实例一般都要有自己的属性，而我们这里将他放在了Person.prototype中，所以随着p1的修改，整个实例包括原型都修改了。那么，我们可以组合使用构造函数模式和原型模式。

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

 function Person(name,age){
 this.name=name;
 this.age=age;
 this.friends=['Big','Pig'];
 }
 Person.prototype={
 sayName:function(){
 return this.name;
 }
 };
 var p1=new Person('Young',18);
 var p2=new Person('Wind',78);
 p1.friends.push('Raganya');
 console.log(p1.friends);//["Big", "Pig", "Raganya"]
 console.log(p2.friends);//["Big", "Pig"]
 console.log(p1.friends==p2.friends);//false
 console.log(p1.sayName==p2.sayName);//true

这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。是用来定义引用类型的一种默认模式。

总结

以上就是关于分析Javascript中创建对象方式的全部内容，通过这篇文章为大家总结的四种方式和其优缺点，希望可以对大家学习使用Javascript能有所帮助。

您可能感兴趣的文章:

相关文章

  • 五句话帮你轻松搞定js原型链

    五句话帮你轻松搞定js原型链

    这篇文章主要给大家介绍了关于js原型链的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序实现验证码倒计时

    微信小程序实现验证码倒计时

    这篇文章主要为大家详细介绍了微信小程序实现验证码倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)

    微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)

    小程序webView中嵌套H5页面,难免会遇到小程序与h5页面进行数据通信或交互的场景,下面这篇文章主要给大家介绍了关于微信小程序与webview H5交互的相关资料,内嵌H5跳转原生页面,需要的朋友可以参考下
    2022-11-11
  • 网页加载速度优化技巧的方案详解

    网页加载速度优化技巧的方案详解

    这篇文章主要为大家介绍了网页加载速度优化技巧的方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
    2023-05-05
  • javascript记录文本框内文字个数检测文字个数变化

    javascript记录文本框内文字个数检测文字个数变化

    要对文本框中用户输入的文字进行记数，在下面显示出来，经研究找到个不错的方法，可以完美解决在删除文字后，字数变化问题
    2014-10-10
  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这篇文章介绍了Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法，有需要的朋友可以参考一下
    2013-08-08
  • 前端双token无感刷新图文详解

    前端双token无感刷新图文详解

    实现token无感刷新对于前端来说是一项十分常用的技术,这篇文章主要给大家介绍了关于前端双token无感刷新的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • JS关闭子窗口并且刷新上一个窗口的实现示例

    JS关闭子窗口并且刷新上一个窗口的实现示例

    这篇文章主要介绍了JS关闭子窗口并且刷新上一个窗口的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • bootstrap警告框示例代码分享

    bootstrap警告框示例代码分享

    这篇文章主要为大家详细介绍了bootstrap警告框示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    这篇文章主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论