一、创建对象
-
使用工厂模式创建对象
用函数来封装以特定接口创建对象的细节，函数createPerson()能够根据接受的参数来创建一个包含所有必要信息的Person对象，可以无数次地调用这个函数，而每次它都会返回一个包含三个属性和一个方法的对象，工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题，即怎样知道一个对象的类型；
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
alert(this.name);
};
return o;
}
var person1 = createPerson('name1', 12, 'job1');
var person2 = createPerson('name2', 34, 'job2');
-
使用构造函数创建对象：
使用new操作符创建对象实例的四个步骤：
1）创建一个新对象；
var obj = {};
2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
// 设置新对象的constructor属性为构造函数的名称；
// 设置新对象的__proto__属性指向构造函数的prototype对象；
obj.constructor = ClassA
obj.__proto__= ClassA.prototype;
3）执行构造函数中的代码（为这个新对象添加属性）；
// 使用新对象调用函数，函数中的this被指向新实例对象
ClassA.call(obj);
4）返回新对象；
构造函数内部使用了this变量，对构造函数使用new运算符，可以生成实例，并且this变量会绑定在实例对象上；
使用new操作符创建对象
// 与工厂模式的不同之处
// 没有显示的创建对象
// 直接将属性和方法赋给了this对象
// 没有return语句
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.type = 'person';
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person('name1',23,'job1');
var person2 = new Person('name2',12,'job2');
console.log(person1.constructor == Person); // true
console.log(person2.constructor == Person); // true
console.log(person1 instanceof Object); // true
console.log(person2 instanceof Object); // true
console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true
// 缺点：浪费内存，每个Person实例都包含一个不同的Function实例
console.log(person1.sayName == person2.sayName); // false
console.log(person1.type == person2.type); // true
// 改进：将sayName属性设置成全局的sayName函数
// person1和person2对象共享了全局作用域中定义的sayName函数
// 缺点：如果对象需要定义很多方法，那就需要定义多个全局函数
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.type = 'person';
this.sayName = sayName;
}
function sayName(){
alert(this.name);
}
var person1 = new Person('name1',23,'job1');
var person2 = new Person('name2',12,'job2');
console.log(person1.constructor == Person); // true
console.log(person2.constructor == Person); // true
console.log(person1 instanceof Object); // true
console.log(person2 instanceof Object); // true
console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true
console.log(person1.sayName == person2.sayName); // true
console.log(person1.type == person2.type); // true
-
使用Prototype模式创建对象：
js规定每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承，因此我们可以把那些不变的属性和方法直接定义在prototype对象上，这样就保证了不变的属性和方法不会被多次生成；
function Person(){}
Person.prototype.name = 'name1';
Person.prototype.age = 23;
Person.prototype.job = 'job1';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();
var person2 = new Person();
person2.sayName();
console.log(person1.sayName == person2.sayName); // true
console.log(Person.prototype.isPrototypeOf(person1)); // true
console.log(Person.prototype.isPrototypeOf(person2)); // true
person1.name = 'name2'; // 设置后可以阻止访问原型中的属性
console.log(person1.hasOwnProperty('name')); // true
delete person1.name; // delete操作符可以完全删除实例属性，从而可以重新访问原型中的属性
console.log(person1.name); // name1
console.log(person1.hasOwnProperty('name')); // false
console.log('name' in person1); // true in操作符不管该属性是位于实例还是原型中，只要能访问到到返回true
console.log(hasPrototypeProperty(person1,'name')); // true
person1.name = 'name3';
console.log(hasPrototypeProperty(person1,'name')); // false
for-in循环：
// 返回所有能够被对象访问、可枚举的属性
// 属性既包括实例中的属性也包括原型中的属性
// 屏蔽了原型中不可枚举属性的实例属性也会for-in循环中返回
var o = {
toString: function() {
return 'My Object';
}
};
for (var prop in o) {
if (prop == 'toString') {
alert('Found toString');
}
}
Object.keys()方法：
// 获取对象上所有可枚举的实例属性
function Person(){}
Person.prototype.name = 'name1';
Person.prototype.age = 25;
Person.prototype.job = 'job1';
Person.sayName = function(){
alert(this.name);
}
var keys = Object.keys(Person.prototype);
console.log(keys); // ["name", "age", "job"]
var person1 = new Person();
var person1Keys = Object.keys(person1);
console.log(person1Keys); // []
person1.name = 'name2';
person1.age = 23;
var person1Keys = Object.keys(person1);
console.log(person1Keys); // ["name", "age"]
Object.getOwnPropertyNames()方法
// 返回对象的所有实例属性，包括不可枚举的constructor属性
function Person(){}
Person.prototype.name = 'name1';
Person.prototype.age = 25;
Person.prototype.job = 'job1';
Person.sayName = function(){
alert(this.name);
}
var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys); // ["constructor", "name", "age", "job"]
var person1 = new Person();
person1.name = 'name1';
var person1Keys = Object.getOwnPropertyNames(person1);
console.log(person1Keys); // ['name']
二、继承
原型链：B继承了A，B创建了实例instance，当调用instance的方法时，会经历三个步骤：1）搜索实例instance；2）搜索B.prototype；3）搜索A.prototype；最后一步才会找到要调用的方法，在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来；
B继承了A，而A继承了Object，当调用instance.toString()时，实际上调用的是保存在Object.prototype中的方法；
- 原型链继承
function Animal() {
this.colors = ['red', 'green', 'blue'];
}
function Cat() {}
Cat.prototype = new Animal();
var cat1 = new Cat();
// 包含引用类型值的原型属性会被所有实例共享
// 创建子类型的实例时，不能向超类型的构造函数中传递参数
cat1.colors.push('black');
console.log(cat1.colors); // ["red", "green", "blue", "black"]
var cat2 = new Cat();
console.log(cat2.colors); // ["red", "green", "blue", "black"]
// 使用prototype模式绑定
function Animal(){
this.species = "动物";
}
function Cat(name,color){
this.name = name;
this.color = color;
}
// Cat的prototype对象指向Animal的实例，Cat的所有实例也就能继承Animal了
Cat.prototype = new Animal();
// 为避免继承链的紊乱
// 任何一个prototype对象都有一个constructor属性，指向它的构造函数
// 上一行将Cat.prototype.constructor指向了Animal，因此需要将Cat.prototype.constructor指回Cat
// 每一个实例都有一个constructor属性，默认调用prototype对象的constructor属性
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(Cat.prototype.constructor == Animal); // false
alert(cat1.constructor == Cat.prototype.constructor); // true
alert(cat1.constructor == Animal); // false
alert(cat1.species); // 动物
- 借用构造函数
// 使用构造函数绑定
function Animal(age) {
this.age = age;
this.species = "动物";
this.colors = ['red','green','blue'];
}
function Cat(name, color) {
// 继承了Animal，同时传递了参数
Animal.call(this, 24); // 此处应使用call方法
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛", "黄色");
cat1.colors.push('black');
console.log(cat1.colors); // ["red", "green", "blue", "black"]
console.log(cat1.species); // 动物
console.log(cat1.age); // 24
var cat2 = new Cat('二毛','白色');
// 解决了引用类型值的原型属性会被所有实例共享的问题
console.log(cat2.colors); // ["red", "green", "blue"]
// 缺陷：方法都在构造函数中定义了，函数复用就无从谈起了
- 组合继承：
// 将原型链和借用构造函数技术组合到一起，集二者之长
// 使用instanceof和isPrototypeOf可以识别基于组合继承创建的对象
function Animal(name){
this.name = name;
this.colors = ['red','blue','green'];
}
Animal.prototype.sayName = function(){
console.log(this.name);
}
function Cat(name,age){
Animal.call(this,name); // 继承属性，第二次调用Animal()
this.age = age;
}
// 继承方法
Cat.prototype = new Animal(); // 第一次调用Animal()
Cat.prototype.sayAge = function(){
console.log(this.age);
}
var cat1 = new Cat('大毛',3);
cat1.colors.push('black');
console.log(cat1.colors); // ["red", "blue", "green", "black"]
cat1.sayName(); // 大毛
cat1.sayAge(); // 3
var cat2 = new Cat('二毛',2);
console.log(cat2.colors); // ["red", "blue", "green"]
cat2.sayName(); // 二毛
cat2.sayAge(); // 2
- 原型式继承：
// 必须有一个对象来作为原型
// object方法对传入其中的对象执行了一次浅拷贝
// 缺陷：包含引用类型值的属性始终共享相应的值
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var animal = {
name: '大毛',
colors: ['red', 'green', 'blue']
}
var cat1 = object(animal);
cat1.name = '二毛';
cat1.colors.push('black');
var cat2 = object(animal);
cat2.name = '三毛';
cat2.colors.push('yellow');
console.log(animal.colors); // ["red", "green", "blue", "black", "yellow"]
// Object.create()方法
var animal = {
name: '大毛',
colors: ['red', 'green', 'blue']
}
var cat1 = Object.create(animal);
cat1.name = '二毛';
cat1.colors.push('black');
var cat2 = Object.create(animal);
cat2.name = '三毛';
cat2.colors.push('yellow');
console.log(animal.colors); // ["red", "green", "blue", "black", "yellow"]
// object方法
var Chinese = {
nation: '中国'
};
// 将子对象的prototype属性指向父对象，从而使得子对象与父对象连在一起
function object(o){
function F(){}
F.prototype = o;
return new F();
}
var Doctor = object(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国
- 寄生式继承：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
// 与寄生构造函数和工厂模式类似
// 创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再返回对象
function createAnother(original) {
var clone = object(original); // 通过调用函数创建一个新对象
clone.sayHi = function() { // 以某种方式来增强这个对象，但不能做到函数复用使得效率不高
console.log('hi'); // 新对象不仅有original的所有属性和方法，而且还有自己的sayHi方法
};
return clone; // 返回这个对象
}
var animal = {
name: '大毛',
colors: ['red', 'green', 'blue']
};
var cat = createAnother(animal);
cat.sayHi(); // hi
- 寄生组合式继承
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function inheritPrototype(cat, animal) {
var prototype = object(animal.prototype); // 创建超类型原型的一个副本
// 增强对象，为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认constructor属性
prototype.constructor = cat;
cat.prototype = prototype; // 将新创建的副本对象赋值给了类型的原型
}
function animal(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
animal.prototype.sayName = function() {
console.log(this.name);
}
function cat(name, age) {
animal.call(this, name);
this.age = age;
}
inheritPrototype(cat, animal);
cat.prototype.sayAge = function() {
console.log(this.age);
}
var cat1 = new cat('二毛', 3);
cat1.sayName(); // 二毛
cat1.sayAge(); // 3
- 直接继承prototype(红宝书未提到，阮一峰提到的一种方法)
// 直接继承prototype
function Animal(){}
Animal.prototype.species = "动物";
function Cat(name,color){
this.name = name;
this.color = color;
}
// Cat()直接跳过Animal()，直接继承Animal.prototype
Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
// 此时Cat.prototype和Animal.prototype现在指向了同一个对象
// 任何对Cat.prototype的修改都会反应到Animal.prototype
alert(Animal.prototype.constructor); // Cat
- 利用空对象作为中介(其实就是原型式继承方法)
// 利用空对象作为中介
function Animal(){
this.species = "动物";
}
function Cat(name,color){
this.name = name;
this.color = color;
}
// F是空对象几乎不占内存，此时修改Cat的prototype对象，不会影响到Animal的prototype对象
var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;
alert(Animal.prototype.constructor); // Animal
// 改进版
function Animal(){
this.species = "动物";
}
function Cat(name,color){
this.name = name;
this.color = color;
}
function extend(Child,Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
// 为子对象设一个uber属性，这个属性直接指向父对象的prototype属性，
// 这相当于在子对象上打开了一条通道，可以直接调用父对象的方法，实现继承的完备性
Child.uber = Parent.prototype;
}
extend(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species);
- 拷贝继承(网上的一种方法)
// 拷贝继承
function Animal(){}
Animal.prototype.species = "动物";
function Cat(name,color){
this.name = name;
this.color = color;
}
// 将父对象的prototype对象中的属性一一拷贝给Child对象的prototype对象
function extend2(Child,Parent){
var p = Parent.prototype;
var c = Child.prototype;
for(var i in p){
c[i] = p[i];
}
c.uber = p;
}
extend2(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
三、深拷贝和浅拷贝
- 浅拷贝方法
// 浅拷贝方法
var Chinese = {
nation: '中国'
};
// 将父对象的属性全部拷贝给子对象，也能实现继承
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国
// 存在的问题
// 如果父对象的属性等于数组或另一个对象，那么子对象获得的只是一个内存地址
// 而不是真正的拷贝，因此存在父对象被篡改的可能
var Chinese = {
nation: '中国'
};
Chinese.birthPlaces = ['北京','上海','香港'];
// 将父对象的属性全部拷贝给子对象，也能实现继承
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
Doctor.birthPlaces.push('厦门');
alert(Doctor.birthPlaces); // 北京，上海，香港，厦门
alert(Chinese.birthPlaces); // 北京，上海，香港，厦门
- 深拷贝
// 深拷贝
var Chinese = {
nation: '中国'
};
Chinese.birthPlaces = ['北京', '上海', '香港'];
// 实现对象和数组和深拷贝
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i],c[i]);
}else{
c[i] = p[i];
}
}
return c;
}
var Doctor = deepCopy(Chinese);
Doctor.birthPlaces.push('厦门');
alert(Doctor.birthPlaces); // 北京，上海，香港，厦门
alert(Chinese.birthPlaces); // 北京，上海，香港
总结：
- 原型链继承
function Animal(){
this.colors = ['red','blue','green'];
}
function Cat(){}
Cat.prototype = new Animal();
- 借用构造函数继承
function Animal(){
this.colors = ['red','blue','green'];
}
function Cat(){
Animal.call(this)
}
- 组合继承
function Animal(){
this.colors = ['red','blue','green'];
}
Animal.prototype.sayColors = function(){
console.log(this.colors);
}
function Cat(){
Animal.call(this); // 继承属性
}
Cat.prototype = new Animal(); // 继承方法
- 原型式继承
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var animal = {
name: '大毛',
colors: ['red', 'green', 'blue']
}
var cat1 = object(animal);
- 寄生式继承
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function createAnother(original) {
var clone = object(original);
clone.sayHi = function() {
console.log('hi');
};
return clone;
}
var animal = {
name: '大毛',
colors: ['red', 'green', 'blue']
};
var cat = createAnother(animal);
- 寄生组合式继承：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function inheritPrototype(cat, animal) {
var prototype = object(animal.prototype);
prototype.constructor = cat;
cat.prototype = prototype;
}
function animal(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
animal.prototype.sayName = function() {
console.log(this.name);
}
function cat(name, age) {
animal.call(this, name);
this.age = age;
}
inheritPrototype(cat, animal);
