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 相关文章推荐
ExtJs的Date格式字符代码
Dec 30 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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并发访问实例代码
2012/09/06 PHP
php 地区分类排序算法
2013/07/01 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
extern是什么意思
2016/03/10 面试题
linux面试题参考答案(11)
2016/11/26 面试题
婚纱摄影师求职信
2014/03/07 职场文书
演讲主持词
2014/03/18 职场文书
植树节活动总结
2014/04/30 职场文书
工商管理本科生求职信
2014/07/13 职场文书
师德师风个人总结
2015/02/06 职场文书
土建技术员岗位职责
2015/04/11 职场文书