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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
JS中常用的消息框总结
Feb 24 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
基于Vue中的父子传值问题解决
Jul 27 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获取当前网址及域名的实现代码
2013/06/23 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP最常用的正则表达式
2017/02/13 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
Python面向对象之类和对象实例详解
2018/12/10 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
项目管理计划书
2014/01/09 职场文书
会走路的树教学反思
2014/02/20 职场文书
初中英语课后反思
2014/04/25 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python