几种JS创建对象的方式分享

本文主要和大家分享几种JS创建对象的方式,希望能帮助到大家。

1、使用原生构造函数创建特定类型的对象

  var person =new Object();    person.name="wangwu";    person.age="20";    person.sayName=function(){    alert(this.name);}

登录后复制

2.用对象字面量

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

登录后复制

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

3.使用工厂模式

function createPerson(name,age){    var o=new Object();    o.name=name;    o.age=age;    o.sayName=function(){            alert(this.name);    };    return o;}var person1=createPerson("wangwu",20);

登录后复制

抽象了创建具体对象的过程,发明一种函数,用函数来封装以特定接口创建对象的细节。

4、构造函数模式

function  Person(name,age){    this.name=name;    this.age=age;    this.sayName=function(){        alert(this.name);    };}var person1=new Person("wangwu",20);

登录后复制

创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

5、原型模式

function Person(){}Person.prototype.name="wangwu";Person.prototype.age=20;Person.prototype.sayName=function(){    alert(this.name);}var person1=new Person();person1.sayName(); //wangwu

登录后复制

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。原型模式的缺点是省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都取得相同的属性值;原型中所有属性是被很多实例共享的,对于包含引用类型值的属性来说问题就比较突出了。

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

function Person(name,age){    this.name=name;    this.age=age;    this.friends=["wangwu","zhangsan"];}Person.prototype={    constructor:Person,    sayName:function(){        alert(this.name);    }}var person1=new Person("wangwu",20);var person2=new Person("zhangsan",23);person1.friends.push("lisi");alert(person1.friends); //"wangwu,zhangsan,lisi"alert(person2.friends); //"wangwu,zhangsan"

登录后复制

7、动态原型模式

  function Person(name,age,job){        //属性    this.name=name;    this.age=age;    this.job=job;//方法if(typeof this.sayName!="function"){    person.prototype.sayName=function(){            alert(this.name);    };}}var  friend=new Person("wangwu",20);friends.sayName();

登录后复制

8、寄生构造函数模式

function Person(name,age){    var 0=new Object();    o.name="wangwu";    o.age=20;    o.sayName=function(){        alert(this.name);    };    return o;}var friend=new Person("wangwu",20);friend.sayName(); //"wangwu"

登录后复制

9、稳妥构造函数模式

function Person(name,age,job){    //创建要返回的对象    var  o=new Object();    //可以在这里定义私有变量和函数    //添加方法    o.sayName=function(){        alert(name);    };//返回对象return o;}var friend=Person("wangwu",20);friend.sayName();  //"wangwu"

登录后复制

相关推荐:

js创建对象的方法汇总(示例代码)

Js创建对象额几种方式

js创建对象的几种常用方式小结(推荐)_js面向对象

以上就是几种JS创建对象的方式分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783181.html

(0)
上一篇 2025年3月8日 16:45:32
下一篇 2025年3月8日 16:45:43

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Javascript的单例模式

    这次给大家带来javascript的单例模式,javascript单例模式的注意事项有哪些,下面就是实战案例,一起来看一下。 单例模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。 划…

    编程技术 2025年3月8日
    200
  • JS的正则表达式如何使用

    这次给大家带来js的正则表达式如何使用,使用js正则表达式的注意事项有哪些,下面就是实战案例,一起来看一下。 学好正则表达式很重要,下面是一些关于正则表达式的基本知识整理  : 转义字符 ^  : 匹配字符串开始位置 $  : 匹配字符串结…

    编程技术 2025年3月8日
    200
  • Angular和Vue.js对比分析

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强。如今,已有许多开发人员开始使用 Vue.js 来取代 Angular 和 Re…

    编程技术 2025年3月8日
    200
  • js中传递和拷贝详解

    我们知道js有几种基本的数据类型和其他的复杂数据类型包括(对象,数组,函数),基本数据类型的赋值其实就是值的拷贝,我们称之为值传递,赋值后的变量和原来的变量除了值相等之外并无其他关联。 let x = 666let y = xlet m =…

    编程技术 2025年3月8日
    200
  • JS实现集合去重交集并集差集功能实例分享

    本文主要和大家介绍了JS实现的集合去重,交集,并集,差集功能,结合实例形式分析了javascript基于数组实现的集合去重、交集、并集、差集等相关实现技巧,需要的朋友可以参考下,希望能帮助到大家。 1. js 实现数组的集合运算 为了方便测…

    编程技术 2025年3月8日
    200
  • webpack如何打包js

    webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。本文主要和大家介绍了webpack打包js的方法,在代码实践之前,先说一写webpack的基础知识。 1、为什…

    2025年3月8日
    200
  • Require.js详解

    这次给大家带来require.js详解,使用require.js详解的注意事项有哪些,下面就是实战案例,一起来看一下。 index.html nbsp;html>                    body        //将r…

    编程技术 2025年3月8日
    200
  • 讲解react.js中经常出现的问题以及解决方法

    React.js 是一个帮助你构建页面 UI 的库,我们对react.js经常出现的问题都做了一个总结,大家对react.js感兴趣的或者是不太了解的都可以参考一下哦!废话少说进入主题! 一、为什么return内多加一个标签后无法就无法再渲…

    编程技术 2025年3月8日
    200
  • react.js中的三元运算讲述

    本篇文章是关于react.js中的三元运算,对于react.js中的三元运算不熟悉或者是不了解的,我们可以一起来看看本篇文章!废话不那么多直接进入主题吧! 一.三元运算 //在js中定义一个style属性,可参见reactjs(一)var …

    编程技术 2025年3月8日
    200
  • class="no-js"是什么意思

    这次给大家带来class=”no-js”是什么意思,使用class=”no-js”的注意事项有哪些,下面就是实战案例,一起来看一下。 首先,确认no-js 是配合 Modernizr 一起使用…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论