入门js设计模式——构造函数模式

参考或者说照搬:http://www.cnblogs.com/TomXu/archive/2012/02/21/2352994.html

1.构造函数

在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。通过new关键字来调用定义的构造函数,你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。

默认地在构造函数中,函数名首字母大写。

(我觉得构造函数就像是用于做月饼的模子,用这个模子做出来的月饼基本形状是一样的(相同的属性和方法及相同的构造方法),但是馅可以不同(具体的值是不一样的),馅是在new一个对象的时候填进去的)

2.原型prototype :函数的一个属性

JavaScript里函数有个原型属性叫prototype,当调用构造函数创建对象的时候,所有该构造函数原型的属性在新创建对象上都可用。

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
}

/*
注意:这里我们使用了Object.prototype.方法名,而不是Object.prototype
主要是用来避免重写定义原型prototype对象
*/
Car.prototype.output= function () {
    return this.model + "走了" + this.miles + "公里";
};  

var tom = new Car("大叔", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

//这里的output()就是一个单例哟,可以在所有Car对象实例里共享使用。

3.不用new来创建对象

(1)用call,改变上下文

function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
// 自定义一个output输出内容
this.output = function () {
return this.model + "走了" + this.miles + "公里";
}
}
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);

//但是用这种方法的话,o不是Car的实例对象
o instanceof Car ; //false

(2)作为函数调用

Car("大叔", 2009, 20000);  //添加到window对象上
console.log(window.year); // 2009 
//因为不用new直接调用函数,this指向的是全局对象window

var tom = Car("大叔", 2009, 20000);
console.log(typeof tom); // "undefined"
console.log(window.output()); // "大叔走了20000公里"

4.强制使用new

function Car(model, year, miles) {
    if (!(this instanceof Car)) {
        return new Car(model, year, miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output = function () {
        return this.model + "走了" + this.miles + "公里";
    }
}

var tom = new Car("大叔", 2009, 20000);
var dudu = Car("Dudu", 2010, 5000);

console.log(typeof tom); // "object"
console.log(tom.output()); // "大叔走了20000公里"
console.log(typeof dudu); // "object"
console.log(dudu.output()); // "Dudu走了5000公里"

5.原始包装函数

JavaScript里有3中原始包装函数:number, string, boolean,有时候两种都用:  

// 使用原始包装函数
var s = new String("my string");
var n = new Number(101);
var b = new Boolean(true);


// 推荐这种
var s = "my string";
var n = 101;
var b = true;

推荐,只有在想保留数值状态的时候使用这些包装函数,关于区别可以参考下面的代码:

// 原始string
var greet = "Hello there";
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 给原始类型添加新属性不会报错
greet.smile = true;
// 单没法获取这个值
//原因:变量greet是不可扩展的;
//Object.isExtensible(greet) ; //false
//greet是在底层上直接实现的,不是object,所以没有原型,没有构造函数,也不能扩展
console.log(typeof greet.smile); // "undefined" // 原始string var greet = new String("Hello there"); // 使用split()方法分割 greet.split(' ')[0]; // "Hello" // 给包装函数类型添加新属性不会报错 greet.smile = true; // 可以正常访问新属性 console.log(typeof greet.smile); // "boolean"

  

  

 

 

    

原文地址:https://www.cnblogs.com/shixiaomiao/p/5213937.html