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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
关于Angular2 + node接口调试的解决方案
May 28 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
基于Node.js的大文件分片上传示例
Jun 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
提问的智慧(2)
2006/10/09 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP函数超时处理方法
2016/02/14 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
vue跨域解决方法
2017/10/15 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python获取当前日期和时间的方法
2015/04/30 Python
Python中取整的几种方法小结
2017/01/06 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
个人租房协议书样本
2014/10/01 职场文书
三八妇女节标语
2014/10/09 职场文书
初中生活随笔
2015/08/15 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
css3 文字断裂效果
2022/04/22 HTML / CSS