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 相关文章推荐
Javascript & DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
js字符串操作方法实例分析
May 06 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue动态子组件的两种实现方式
Sep 01 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/24 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
电子工程求职信
2014/07/17 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python