详解js 创建对象的几种方法

 更新时间:2019年03月08日 09:29:12   作者:胡说叔叔  
这篇文章主要介绍了js 创建对象的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在js中创建对象的方法可分为6种,分别是:基本模式、工厂模式、构造函数模式、原型模式、组合模式、动态原型模式,接下来分别看下这几种模式的写法吧

一、基本模式

var person = new Object();
 person.name = "孙悟空";
 person.weapon = "棒子";
 person.run = function () { return this.name + "武器是" + person.weapon;
 }

二、工厂模式

function creatPerson(name, weapon) { var person = new Object();
 person.name = "孙悟空";
 person.weapon = "棒子";
 person.run = function () { return this.name + "武器是" + person.weapon;
 } return person;
 }

缺点:1、实例之间没有联系;2、没有使用new关键字;3、会造成资源的浪费,每生成一个实例都会都会增加一些重复的内容
缺点3如何理解呢:在多次调用creatPerson方法时,创建对象的方法run会生成多个,虽然多个对象的方法都是一样的。

构造函数解决了多个实列之间没有联系的问题,可以用instanceof判断

三、构造函数模式

function creatPerson(name, weapon) { this.name = name; this.weapon = weapon; this.run = function () { return this.name + "武器是" + this.weapon;
 }
 } //调用创建对象
 var wukou =new creatPerson("孙悟空", "棒子");

缺点:没有解决工厂模式浪费内存的缺点,每创建一个对象会增加很多重复的东西
为了解决这个问题请看原型模式

四、原型(Prototype)模式

js中规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法,都会被构造函数的实例继承,可以把那些不变的属性和方法直接定义在prototype对象上

 function personObj() { }
 personObj.prototype.name = "孙悟空";
 personObj.prototype.weapon = "棒子";
 personObj.prototype.run = function () { return this.name + "武器是" + this.weapon;
 } //创建对象
 var person = new personObj(); //原型模式的另一种写法 function personObj() { }
 personObj.prototype = {
 constructor: personObj,//强制指回personObj
 name: "孙悟空",
 weapon: "棒子",
 run: function () { return this.name + "武器是" + this.weapon;
 }
 }

缺点:构造函数没有参数,不能传参初始化值,因为不同的对象可能只共享方法,但是不会共享属性,为了解决这个问题请看构造函数和原型模式的组合模式,还解决了前面的所有缺点,Jquery就是使用的这种方法

五、组合模式

这样,不同的实例可有自己特有的属性,还有共享的方法

 function personObj(name,weapon) { this.name = name; this.weapon = weapon;
 }
 personObj.prototype = {
 run: function () { return this.name + "武器是" + this.weapon;
 }
 } //创建对象
 var wukou = new personObj("孙悟空", "棒子");

虽然这种创建对象的方式已经够我们使用了,平时使用这方式也没有问题的,当然还有一点小问题:对象中的属性和方法是分开的,请看动态原型方法

六、动态原型模式

 function personObj(name, weapon) { this.name = name this.weapon = weapon if (typeof this.run != "function")
 {
 personObj.prototype = {
 run: function () { return this.name + "武器是" + this.weapon;
 }
 }
 }
 
 } 
 //创建对象
 var wukou = new personObj("孙悟空", "棒子");

函数中使用 if (typeof this.run != "function") 目的是为了防止创建多个对象时,方法执行多次

以上所述是小编给大家介绍的js 创建对象的几种方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 分享20个JavaScript 单行代码

    分享20个JavaScript 单行代码

    这篇文章主要给大家分享了20个JavaScript 单行代码,JavaScript单行代码杀手锏,可以让工作更有效率哦,需要的朋友可以参考一下,希望对你的学习有所帮助
    2021-12-12
  • JavaScript制作淘宝星级评分效果的思路

    JavaScript制作淘宝星级评分效果的思路

    这篇文章主要介绍了JavaScript制作淘宝星级评分效果的整个思考过程,思路很清晰,并附带了完整的程序源码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 详解JS中的立即执行函数

    详解JS中的立即执行函数

    本文主要介绍了js中立即执行函数的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript知识点总结(四)之逻辑OR运算符详解

    JavaScript知识点总结(四)之逻辑OR运算符详解

    这篇文章主要介绍了JavaScript知识点总结(四)之逻辑OR运算符详解的相关资料,在JavaScript中,逻辑OR运算符用||表示。本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05
  • javascript判断移动端访问设备并解析对应CSS的方法

    javascript判断移动端访问设备并解析对应CSS的方法

    这篇文章主要介绍了javascript判断移动端访问设备并解析对应CSS的方法,涉及移动端设备的判断及动态加载技巧,需要的朋友可以参考下
    2015-02-02
  • 微信小程序canvas实现手写签名

    微信小程序canvas实现手写签名

    这篇文章主要为大家详细介绍了微信小程序canvas实现手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript中闭包的详解

    JavaScript中闭包的详解

    本文主要介绍了JavaScript中闭包的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript判断日期时间差的实例代码

    JavaScript判断日期时间差的实例代码

    本文通过实例代码给大家介绍了js判断日期时间差的方法,文章给大家补充介绍了js求时间差的代码,需要的朋友参考下吧
    2018-03-03
  • js实现右下角窗口弹出窗口效果

    js实现右下角窗口弹出窗口效果

    好的朋友经常需要弹出信息,这个功能不错
    2008-09-09
  • js编写贪吃蛇的小游戏

    js编写贪吃蛇的小游戏

    本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望对大家学习js有所帮助
    2015-12-12

最新评论