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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
JavaScript实现轮播图片完整代码
Mar 07 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正则
2006/07/07 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python实现自动签到脚本功能
2020/08/20 Python
Python列表推导式实现代码实例
2020/09/09 Python
结构工程个人自荐信范文
2013/11/30 职场文书
小学生综合素质评语
2014/04/23 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
心理咨询承诺书
2014/05/20 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
花木兰观后感
2015/06/10 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
创业计划书之校园超市
2019/09/12 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript