JS创建自定义对象的六种方法总结

1、创建一个 Object 实例

var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
 console.log(this.name);
};
console.log(person);

2、对象字面量

var person = {
 name: "rose",
 age: 18,
 job: "actor",
 sayName: function () {
 console.log(this.name);
 },
};
console.log(person);

上面两种方式是创建对象的两种基本方式,他们的原型就是 Object

3、工厂模式

function createPerson(name,age,actor){
 var person = new Object();
 person.name = "rose";
 person.age = 18;
 person.job = "actor";
 person.sayName = function () {
  console.log(this.name);
 };
 return person
}
console.log(p1 instanceof Object);//true
console.log(p1 instanceof createPerson);//false

从上面代码中我们可以看出来,工厂模式实际上就是借助函数,内部返回使用第一种方式( new Object())创建的对象。

优点:可以很方便的创建相似对象。

缺点:没有解决对象识别的问题,即怎样知道一个对象的类型。

4、构造函数方式

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function () {
 console.log(this.name);
 };
}
var p = new person("rose", 18, "actor");
console.log(p instanceof Person);//true
console.log(p instanceof Object);//true

构造函数可以创建特定类型的对象,像 Object , Array 这样的原生构造函数,在运行时会自动出现在执行环境中。

构造函数模式与工厂模式的不同之处为:

  1. 没有显式得创建对象,
  2. 直接将属性和方法赋值给了this对象
  3. 没有return语句

构造函数方式创建对象必须使用 new ,操作符,会经历下面四个步骤

  1. 创建一个对象
  2. this指向这个新创建的对象
  3. 执行代码
  4. 返回这个对象

构造函数方式的优点:以构造函数创建的对象,在其原型上都会有一个 constructor 属性,这个属性指向构造函数 Person 而这个属性最初是用来标识数据类型的。

忧化

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = sayName;
}
function sayName(){
 console.log(this.name);
}
var p = new person("rose", 18, "actor");

缺点:当对象需要很多方法的时候,就会定义多个全局作用域下的函数,这样一来,不仅毫无封装性可言,而且让全局作用域下的函数过多。

5、原型模式

function Person() {}
Person.prototype.name = "rose";
Person.prototype.age = 18;
Person.prototype.sayName = function () {
 console.log(this.name);
};
var p = new Person();
console.log(p);

说到原型对象就要说一下原型链,原型与原型链对象如下图所示:

我们可以看到,在prototype上面定义的所有属性都是在其原型对象上。在原型对象上的属性与方法属于公有属性和公有方法。其所有实例都可以访问到。

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

function Person(name, age) {
 this.name = name;
 this.age = age;
}
Person.prototype.sayName = function () {
 console.log(this.name);
};
var p = new Person("rose", 18);
console.log(p);

对象在引用其属性的时候,会按照原型链去查找,直到查找到Object的原型。

总结

到此这篇关于JS创建自定义对象的六种方法的文章就介绍到这了,更多相关JS创建自定义对象方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Javascript创建自定义对象 创建Object实例添加属性和方法

    如下所示: 复制代码 代码如下: var person = new Object(); person.name = "Nicholas"; person.age = "29" person.job = "Software Engineer"; person.sayName = function () { alert(this.name); }; person.sayName();上面的例子创建了一个名为person的对象,并为它添加了三个属性(n

  • JavaScript实现创建自定义对象的常用方式总结

    本文实例讲述了JavaScript实现创建自定义对象的常用方式.分享给大家供大家参考,具体如下: 1. 对象字面量方式 对象字面量方式是创建自定义对象的首选模式,简单方便. var per = { name:'zhangsan', age:25, job:'html', sayName:function(){ alert(this.name); } } 缺点:使用同一个接口创建很多对象,会产生大量的重复代码.比如我想再创建一个per1对象,我就得把上面的代码再重新写一遍,改变不同的属性值. 2.

  • JS自定义对象创建与简单使用方法示例

    本文实例讲述了JS自定义对象创建与简单使用方法.分享给大家供大家参考,具体如下: <html> <head> <title>js自定义函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> //创建自定义对象 //方法一: // var obj=new Object(); //方法二 var obj={}; obj.n

  • javascript中自定义对象的属性方法分享

    首先介绍下关联数组: 复制代码 代码如下: <script> var test=new Object(); test["a"]=1; test["b"]="string"; test["c"]=false; alert(test["a"]); </script> 执行上面的代码,显示1.在javascript中,方法和属性一样当做值来看待. 复制代码 代码如下: <script

  • Javascript 中创建自定义对象的方法汇总

    Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 复制代码 代码如下: var student = new Object();      student.name = "xiao ming";      student.age = 20;      student.getName = function () {          alert(th

  • JS创建自定义对象的六种方法总结

    1.创建一个 Object 实例 var person = new Object(); person.name = "rose"; person.age = 18; person.job = "actor"; person.sayName = function () { console.log(this.name); }; console.log(person); 2.对象字面量 var person = { name: "rose", age:

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • IOS 中NSUserDefaults读取和写入自定义对象的实现方法

    IOS 中NSUserDefaults读取和写入自定义对象的实现方法 NSUserDefaults可以存取一些短小的信息. 比如存入再读出一个字符串到NSUserDefaults: NSString *string = [NSString stringWithString @"hahaha"]; NSUserDefaults *ud = [NSUserDefaults standardUserDefaults]; [ud setObject:string forKey:@"m

  • JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • python 自定义对象的打印方法

    在python中,如果不重写自定义对象的__str__方法,打印出来的对象是一串类似于<__main__.Bean object at 0x1007da470>的字符串.这当然不是我们想要的结果. 于是:通过对__str__方法的重写,就可以返回我们想要的数据的展示. 但是,一个新的问题出现了.以后,如果要修改这个类的属性,那么要想正确的显示对象的属性.还得修改__str__方法. 有没有办法可以做到动态显示所有的属性呢? 当然是有的. 通过对对象的属性的收集,就可以实现动态的打印全部的属性.

  • Node.js创建一个Express服务的方法详解

    本文实例讲述了Node.js创建一个Express服务的方法.分享给大家供大家参考,具体如下: 1.创建一个HttpServer服务端 在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件.首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数.在回调函数内对请求req进行处理,并返回res结果. 利用url的parse方法将req请

  • Powershell中创建自定义对象例子

    支持3.0及以后版本 下面是一个简单有效的创建一个自定义对象的方法: 复制代码 代码如下: $object = [PSCustomObject]@{   Name = 'Weltner'   ID = 123   Active = $true } 这将产生一个含初始值的对象: 复制代码 代码如下: PS> $object   Name                                                ID                    Active ---- 

随机推荐