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的执行顺序 之实战篇
Mar 03 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
js的延迟执行问题分析
Jun 23 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP goto语句用法实例
2019/08/06 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
速记Python布尔值
2017/11/09 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
二手书店创业计划书
2014/01/16 职场文书
审计专业自荐信范文
2014/04/21 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
个人廉政承诺书
2015/04/28 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书