脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS创建自定义对象方法

JS创建自定义对象的六种方法总结

 更新时间：2020年12月15日 15:33:54   作者：极致同学  
这篇文章主要给大家介绍了关于JS创建自定义对象的六种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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);

说到原型对象就要说一下原型链，原型与原型链对象如下图所示：

我们可以看到，在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);

对象在引用其属性的时候，会按照原型链去查找，直到查找到Object的原型。

总结

到此这篇关于JS创建自定义对象的六种方法的文章就介绍到这了,更多相关JS创建自定义对象方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现两周内自动登录功能

    JS实现两周内自动登录功能

    这篇文章主要为大家详细介绍了JS实现两周内自动登录功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • layui使用技巧和常见问题汇总

    layui使用技巧和常见问题汇总

    layui技巧：下拉框未展示问题;下拉框的onchange事件处理;关闭弹出层,重新加载父页面;父页面如何传递参数给弹出层的iframe页面;表单元素处于禁用状态;表单提交如何获取表单元素值集合;数据表格固定列;带搜索的下拉框;表单提交阻止页面跳转;父页面和子窗口传递值
    2024-07-07
  • javascript自定义滚动条实现代码

    javascript自定义滚动条实现代码

    这篇文章主要为大家详细介绍了javascript自定义滚动条实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS面向对象编程基础篇（三） 继承操作实例详解

    JS面向对象编程基础篇（三） 继承操作实例详解

    这篇文章主要介绍了JS面向对象编程继承操作,结合实例形式详细分析了JS面向对象继承的具体概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 简单了解微信小程序的目录结构

    简单了解微信小程序的目录结构

    这篇文章主要介绍了简单了解小程序的目录结构，在开发小程序之前，我们首先需要对其目录结构进行了解，以便于提升开发效率,需要的朋友可以参考下
    2019-07-07
  • js保留两位小数方法总结

    js保留两位小数方法总结

    本篇文章给大家总结了js保留两位小数的各种方法以及每种方法的实例代码分析，如果大家对此有需要，一起来学习下js保留两位小数的方法吧。
    2018-01-01
  • DIV层之拖动、关闭、打开效果代码

    DIV层之拖动、关闭、打开效果代码

    非常不错的效果，适合在当前页打开测试窗口，图片等
    2008-09-09
  • JavaScript截断字符串的方法

    JavaScript截断字符串的方法

    这篇文章主要介绍了JavaScript截断字符串的方法,涉及javascript字符串截取的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 浅析JavaScript中的同名标识符优先级

    浅析JavaScript中的同名标识符优先级

    这篇文章主要介绍了JavaScript中的同名标识符优先级。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • JavaScript中的Function函数

    JavaScript中的Function函数

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块，接下来跟着小编一起来学习javascript中的function函数，小伙伴们快来一起学习吧
    2015-08-08

最新评论