Day8 js中创建对象的10种方式

185 阅读2分钟

Day8 打卡 总结js中创建对象的10种方式

每日一句

With every sun comes a new day.

释义:每每旭日东升,都是崭新的开始。

js中创建以象的10种方式

1.new Object()

缺点:步骤多

2.var 对象名={}

缺点:反复创建时,代码冗余

3.工厂函数方式

function createObj(name) {
  var obj = new Object()
  obj.name = name;
  return obj;
}
var zs = new createObj('zs');

缺点:本质还是Object(),将来无法根据原型对象判断对象的类型,出来的都是'[object Object]'

4.构造函数

function CreateObj(name) {
  this.name = name
  this.say = function(){}
}
var zs = new CreateObj();

缺点:如果构造函数有方法,则重复创建,浪费内存

5.原型对象方式

function CreateObj(){
}
CreateObj.prototype.name = '主人很懒!';
CreateObj.prototype.say = function(){};
var zs = new CreateObj();
zs.name = 'zs';
var bs = new CreateObj();
console.log(zs.name, bs.name); // zs 主人很懒!

缺点:步骤繁琐

6.混合模式:先创建相同对象,再给子对象创建个性化属性

function CreateObj(name){
  this.name = name
}
CreateObj.prototype.say = function(){};
var zs = new CreateObj('zs');
var bs = new CreateObj('bs');
console.log(zs.name, bs.name); // zs bs

缺点:不利于封装,不符合对象封装思想

7.动态混合模式:先创建相同对象,再给子对象创建个性化属性(只不过是在构造函数里面)

function CreateObj(name){
  this.name = name;
  if (CreateObj.prototype.say === undefined){
    CreateObj.prototype.say = function(){};
  }
}
var zs = new CreateObj('zs');
var bs = new CreateObj('bs');
console.log(zs.name, bs.name); // zs bs

缺点:语义不符,if是仅在第一次创建时有效

8.寄生构造函数:构造函数里调用其他构造函数

function CreateObj(name){
  this.name = name;
  if (CreateObj.prototype.say === undefined){
    CreateObj.prototype.say = function(){};
  }
}
function newObj(name, what) {
  var p = new CreateObj(name);
  p.play = function(){
    console.log(`${name}开始玩${what}了...`);
  }
  return p;
}
var p = new newObj('zs', '吃🐔'); // 可new 可不new 因为new构造函数中没有this
p.play(); // zs开始玩吃🐔了...

9.ES6 class:程序中专门集中保存一种类型的所有子对象统一的属性结构和方法定义的数据结构。

用class包裹原构造函数+原型对象
将构造函数名更名为constructor, 方法也适当更改

class {
    constructor CreateObj(name){
      this.name = name;
    }
    say() {}
}

10.稳妥构造函数:用闭包(不用this, new),安全可靠

function CreateObj(name){
  var p ={}
  p.say = function() { console.log(`${name}`)}
  p.play = function() {}
  return p
}
var p = CreateObj('zs');
p.say(); //