首页 web前端 js教程 几种JS创建对象的方式分享

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

Mar 13, 2018 pm 06:04 PM
javascript 分享 方式

本文主要和大家分享几种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创建对象的方式分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

夸克网盘怎么分享到百度网盘? 夸克网盘怎么分享到百度网盘? Mar 14, 2024 pm 04:40 PM

  夸克网盘和百度网盘都是很便利的存储工具,不少的用户们都在询问这两款软件互通吗?夸克网盘怎么分享到百度网盘?下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。  夸克网盘的文件怎么保存到百度网盘方法  1、想要知道怎么把夸克网盘的文件转到百度网盘,首先在夸克网盘上下载需要保存的文件,然后打开百度网盘客户端后,选择压缩文件要保存的文件夹,双击打开该文件夹。  2、打开该文件夹后,点击窗口左上角区域的“上传”。  3、在电脑中找到需要上传的压缩文件,点击选

网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

1、首先我们进入到网易云音乐中,然后在软件首页界面中,点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中,找到右上方的分享功能按钮,如下图红框所示位置,点击选择分享的渠道;在分享渠道中,点击底部的“分享至”选项,然后选择第一个“微信朋友圈”,即可将内容分享至微信朋友圈。

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

百度网盘怎么分享文件给好友 百度网盘怎么分享文件给好友 Mar 25, 2024 pm 06:52 PM

近期,百度网盘安卓客户端迎来了全新的8.0.0版本,这一版本不仅带来了众多变化,还增添了诸多实用功能。其中,最为引人注目的便是文件夹共享功能的增强。现在,用户可以轻松邀请好友加入,共同分享工作和生活中的重要文件,实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢,下文中本站小编就将为大家带来详细内容介绍,希望能帮助到大家!1)打开百度云APP,首先点击在首页中选择相关的文件夹,然后再点击界面右上角的【...】图标;(如下图)2)随后点击“共享成员”一栏中的【+】,最后在勾选所

芒果tv会员账号分享2023 芒果tv会员账号分享2023 Feb 07, 2024 pm 02:27 PM

芒果TV拥有各种类型的电影、电视剧、综艺等资源,用户可以在其中自由的选择进行观看。芒果tv会员不仅能够看到全部的VIP剧而且还能够设置最高清的画质,帮助用户爽快看剧,下面小编就给大家带来一些芒果tv免费的会员账号供用户们使用,赶紧来看一看吧。芒果tv最新会员账号免费分享2023:注意:都是收集的最新会员账号,可以直接登录使用,不要随意的修改密码。账号:13842025699密码:qds373账号:15804882888密码:evr6982账号:13330925667密码:jgqae账号:1703

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

解决Discuz微信分享无法显示的问题 解决Discuz微信分享无法显示的问题 Mar 09, 2024 pm 03:39 PM

标题:解决Discuz微信分享无法显示的问题,需要具体代码示例随着移动互联网的发展,微信成为了人们日常生活中不可或缺的一部分。在网站开发中,为了提升用户体验和扩大网站的曝光度,很多站点会集成微信分享功能,让用户能够方便地分享网站的内容到朋友圈或者微信群中。然而,有时候在使用Discuz等开源论坛系统时,会遇到微信分享无法显示的问题,这给用户体验带来了一定的困

如何分享ppt 如何分享ppt Mar 20, 2024 pm 07:51 PM

职场人士对PPT制作不会太陌生吧,因为不管是年终总结还是述职报告很多公司都要求用PPT的形式来体现。此时就遇到一个问题,那就是如何分享PPT呢?不要着急,下面小编带大家了解一下分享PPT的方法。1、首先选择编辑好的PPT,点击左上角的保存(如果使用的是WPS,可以先点击登录)。2、接着点击下图菜单栏的分享图标,如下图所示。3、然后会弹出下图的分享界面,可以看到会出现一个分享链接,点击发送链接即可分享。4、还可以点击下图左下角的“允许好友编辑”,这样好友也可以点击编辑这个PPT了。5、如果需要给P

See all articles