JS自定义对象
创建对象的几种方式
- 使用Object或对象字面量创建对象
- 工厂模式创建对象
- 构造函数创建对象
- 原型模式创建对象
使用Object或对象字面量创建对象
JS中最基本创建对象的方式:
// Object创建对象
var man = new Object();
man.name = 'zhangsan';
man.age = 18;
// 字面量创建对象
var man = {
name : 'zhangsan',
age:18
};
但是当我们要创建同类对象时,我们不得不将以上的代码重复n次....为了解决这个问题,就使用到了工厂模式
工厂模式创建对象
JS中没有类的概念,那么我们使用一种函数将以上对象创建过程封装起来,以便于重复调用,同时可以给出特定接口来初始化对象。
function createMan(name,age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var man1 = createMan('zhangsan',18);
var man2 = createMan('lisi',20);
这样我们就通过函数可以不断创建同类对象了。
构造函数模式创建对象
我们不仅希望对象的产生可以像工厂车间一般源源不断,还想知道产生的类型是哪一种类型。在创建原生数组Array类型对象时,我们就使用过其构造函数:
var arr = new Array(10); // 构造一个初识长度为10的数组对象
构造函数和普通函数的区别:
- 调用方式区别。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new就是普通函数。
- 约定俗成,构造函数名以大写字母开头,普通函数以小写字母开头。
- 使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。
使用构造函数将工厂模式的函数重写,并添加新方法:
function Student(name,age) {
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
}
function Fruit(name, color) {
this.name = name;
this.color = color;
this.alertName = function() {
alert(this.name)
};
}
这样再分别创建Student和Fruit的对象:
var v1 = new Student('easy',20);
var v2 = new Fruit("apple", "green");
再用instanceof
操作符来检测以上对象类型就可以区分出Student以及Fruit了:
alert(v1 instanceof Student); //true
alert(v2 instanceof Student); // false
alert(v1 instanceof Fruit); // false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); // true 所有对象均继承自Object
使用构造器函数通常在js中我们来创建对象。我们会发现Student和Fruit对象中共有同样的方法,当我们进行调用的时候这无疑是内存的消耗。
我们可以在执行该函数的时候再这样做,办法是将对象方法移到构造函数外部:
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = alerName;
}
function alertName() {
alert(this.name);
}
var stu1 = new Student("easy", 20);
var stu2 = new Student("easy2", 20);
在调动stu1.alert()时,this对象才被绑定到stu1上。
通过将alertName()函数定义为全局函数,这样对象中的alertNAME属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费问题。
但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。
原型的模式创建对象
原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分。
function Student() {
this.name = 'easy';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数