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 相关文章推荐
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python实现购物程序思路及代码
2017/07/24 Python
分析python切片原理和方法
2017/12/19 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
软件测试企业面试试卷
2016/07/13 面试题
毕业生实习鉴定
2013/12/11 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python