美文网首页LiYajie web前端
javascript设计模式-构造器模式

javascript设计模式-构造器模式

作者: LiYajie | 来源:发表于2017-01-21 22:15 被阅读4次

对象创建

方式一 var newObj = { };
方式二 var newObj = new Object();

给对象赋值

四中方式

// ECMAScript 3 兼容方式
// 1. 点语法
var obj = {};
obj.name = 'liyajie';
// 取值
var n = obj.name;// 或者obj['name'];

// 2. 中括号语法
obj['age'] = 12;
// 取值
var age = obj['age'];// 或者 obj.age
// 点语法可中括号语法之间是可以互通的.

// ECMAScript 5 兼容方式
// 3. Object.defineProperty
// 语法 Object.defineProperty(obj, prop,descriptor);
var person = {};
Object.defineProperty(person,'name' , {
  value: 'liyajie',// name属性的值, 默认undefined
  writable:true, // 是否可以被重新赋值, 默认false
  enumerable:true, // true 则说明能够出现在对象的枚举属性中,默认false
  configurable:false // false说明value, writable, enumerable属性不可以重新被修改或删除, true的时候则可以, 默认false
});
// 取值 可以直接使用点语法或者中括号语法取值

// 4. Object.defineProperties(obj,props) 给对象赋值多个属性
Object.defineProperties(person,{
  name:{
    value:'liyajie',
    writable:true
  },
  age:{
    value:21,
    writable:true
  }
});
// 取值直接使用点语法或者中括号语法

js实现简单的继承

var person = {
    name:'liyajie'
};
var student = Object.create(person);
student.age = 24; // 自定义属性
console.log(student.name);// 获取继承自person的属性
console.log(student.age); // 获取student自己的属性

基本构造器

// 默认就返回this对象
function Car (name,speed,miles){
    this.name = name;
    this.speed = speed;
    this.miles = miles;
        this.toString = function(){
            return '这辆车是:'+this.name+', 时速每'+this.miles+'分钟'+this.speed;
        }
}
var car1 = new Car('奔驰','100km',1);
var car2 = new Car('悍马','100km',2);
console.log(car1.toString());
console.log(car2.toString());

以上就是一个简单的构造器模式, 但是存在一些问题, 就是让继承变得困难, 还有toString() 这样的方法应该是在每个对象之间共享的. 现在是针对每个创建的新对象重新定义的, 所以这不是最理想的, 我们可以使用原型prototype进行改进.

带原型的构造器(Constructor)

function Car (name,speed,miles){
    this.name = name;
    this.speed = speed;
    this.miles = miles;
}
Car.prototype.toString = function(){
    return '这辆车是:'+this.name+', 时速每'+this.miles+'分钟'+this.speed;
}

这样toString() 的单一实例就能在所有的car对象中共享了.

相关文章

网友评论

    本文标题:javascript设计模式-构造器模式

    本文链接:https://www.haomeiwen.com/subject/nxsnbttx.html