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 相关文章推荐
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
微信小程序如何实现五星评价功能
Oct 15 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
Terran剧情介绍
2020/03/14 星际争霸
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python3多线程知识点总结
2019/09/26 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python实现经典排序算法的示例代码
2021/02/07 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
捐款倡议书
2014/04/14 职场文书
工厂搬迁方案
2014/05/11 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
会议邀请函
2015/01/30 职场文书
答谢酒会主持词
2015/07/02 职场文书
法律服务所工作总结
2015/08/10 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL