专栏首页Czy‘s BlogJs创建对象的方式

Js创建对象的方式

Js创建对象的方式

Js创建对象的方式,这里的对象除了指Js内置Object对象之外还有更加广义上的面向对象编程中的对象。

字面量方式

对象字面变量是对象定义的一种简写形式,能够简化创建包含大量属性的对象的过程。

var obj = {
    a: 1,
    b: function(){
        return this.a;
    }
}
console.log(obj); // {a: 1, b: ƒ}

ES6中使用字面量创建对象时还可以配合Spread操作符与解构赋值使用。

var o1 = {a: 1, b: 11}
var o2 = {c: 111, d: 1111}

var o3 = {...o1, ...o2}
var {a, b} = {a: 1, b: 2}

console.log(o3); // {a: 1, b: 11, c: 111, d: 1111}
console.log(a, b); // 1 2

Object构造函数

使用Object构造函数创建对象使用与字面量创建相同,但是需要单独指定内部成员。

var obj = new Object();
obj.a = 1;
obj.b = function(){
    return this.a;
}
console.log(obj); // {a: 1, b: ƒ}

Object.create

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

var obj = Object.create(null); // 创建一个没有原型链指向的对象
var obj = Object.create(Object.prototype); // 等同于 new Object()
obj.a = 1;
obj.b = function(){
    return this.a;
}
console.log(obj); // {a: 1, b: ƒ}

工厂模式

构造创建对象的工厂,调用即产生对象,能够减少重复代码,减小代码冗余。

function factory(){
    var o = new Object();
    o.a = 1;
    o.b = function(){
        return this.a;
    }
    return o;
}
var obj = factory();
console.log(obj); // {a: 1, b: ƒ}

构造函数

使用new关键字可以简化创建多个属性值相同的对象的操作,并能够显式获取对象类型。

function _object(){
    this.a = 1;
    this.b = function(){
        return this.a;
    }
}
var obj = new _object();
console.log(obj); // _object {a: 1, b: ƒ}
console.log(obj instanceof _object); // true

原型模式

使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。

function _object(){}
_object.prototype.a = 1;
_object.prototype.b = function(){
    return this.a;
}
var obj = new _object();
console.log(obj); // _object {}
console.log(obj.a); // 1
console.log(obj.b()); // 1
console.log(obj instanceof _object); // true

构造函数和原型组合

构造函数和原型组合的方式解决可以解决原型模式下不能传递参数的问题,也能解决在构造函数模式下不能共享实例方法的问题。

function _object(){
    this.a = 1;
}
_object.prototype.b = function(){
    return this.a;
}
var obj = new _object();
console.log(obj); // _object {a: 1}
console.log(obj.a); // 1
console.log(obj.b()); // 1
console.log(obj instanceof _object); // true

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://juejin.im/post/5b150fcf518825139b18de11
https://juejin.im/entry/58291447128fe1005cd41c52
https://www.cnblogs.com/shirliey/p/11696412.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Js中的逻辑运算符

    JavaScript中有三个逻辑运算符,&&与、||或、!非,虽然他们被称为逻辑运算符,但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值,他们的结果也同样...

    WindrunnerMax
  • Js严格模式

    JavaScript严格模式strict mode,即在严格的条件下运行。严格模式消除了Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;消除...

    WindrunnerMax
  • valueOf与toString

    valueOf和toString是Object.prototype上的方法,在Js几乎所有的对象都会继承自Object,同样由于包装对象的原因,几乎所有的数据类...

    WindrunnerMax
  • Js中的逻辑运算符

    JavaScript中有三个逻辑运算符,&&与、||或、!非,虽然他们被称为逻辑运算符,但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值,他们的结果也同样...

    WindrunnerMax
  • 2015.12.30 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日主要涉及函数与参数的12.29日题目的解答,以及一道简单的作用域的题目。 HTML5真题【2015.12.29】答案...

    HTML5学堂
  • JavaScript基本语法(一)

    1.什么是变量 2.为什么要使用变量 3.变量如何使用 4.原理图 5.变量命名规则和规范 6.变量的交换

    靠谱先生
  • XMLHttpRequest Level 2 使用指南

    XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。 最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器...

    ruanyf
  • Unity 基于Cinemachine计算透视摄像机在地图中的移动范围

    https://www.cnblogs.com/koshio0219/p/11820654.html

    汐夜koshio
  • 2015.12.29 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日主要涉及12.24日题目的解答,以及一道涉及函数作用域的题目。 HTML5真题【2015.12.24】答案解析 12...

    HTML5学堂
  • JS的数据类型/判断方法/栈与堆/深浅拷贝

    用来检测:undefined、string、number、boolean、symbol、object、function 无法检测引用类型里的Array

    杨肆月

扫码关注云+社区

领取腾讯云代金券