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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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 nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
使用PHP实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
css图片自适应大小
2007/11/28 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
2014年圣诞节促销方案
2014/03/14 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
感谢信格式范文
2015/01/22 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
服务器间如何实现文件共享
2022/05/20 Servers