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


Posted in Javascript onDecember 15, 2020

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);

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

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

我们可以看到,在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);

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

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

总结

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

Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
vue实现简单loading进度条
Jun 06 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
npm全局环境变量配置详解
Dec 15 #Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
angular *Ngif else用法详解
Dec 15 #Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 #Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 #Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 #Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
You might like
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Django框架安装方法图文详解
2019/11/04 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python 实现音频叠加的示例
2020/10/29 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
市场营销毕业生自荐信范文
2014/04/01 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
python 对图片进行简单的处理
2021/06/23 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript