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 $.ajax入门应用一
Nov 19 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
ES6实现图片切换特效代码
Jan 14 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/20 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
input输入框内容实时监测(附代码)
2017/08/15 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
JS typeof fn === 'function' && fn()详解
2020/08/22 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python每天定时运行某程序代码
2019/08/16 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
办公设备采购方案
2014/03/16 职场文书
比赛口号大全
2014/06/10 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
创业计划书之便利店
2019/09/05 职场文书
python获取对象信息的实例详解
2021/07/07 Python