面向对象编程（2） - liyaozr

之前讲过什么是面向对象编程，然后写了两个简单的小实例，今天继续研究。

一包装对象

1.什么是包装对象

先来看这段代码：

var str = 'hello';
alert( typeof str ); //string

str.charAt(0);
str.indexOf('e');

很明显，str的类型是string，按理说只有对象才会有属性和方法，为什么字符串可以使用方法呢？

其实这就是包装对象。

分别与数值、字符串、布尔值相对应的Number、String、Boolean这三个原生对象可以把原始类型的值变成（包装成）对象。

这三个对象作为构造函数使用（带有new）时，可以将原始类型的值转为对象；作为普通函数使用时（不带有new），可以将任意类型的值，转为原始类型的值。

2.原始类型的自动转换

在上面的代码中，执行到str.charAt(0);的时候，基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失。这就叫原始类型的自动转换。

但是这个对象是临时的，我们不能对它进行修改。

var str = 'hello';
alert(str.length);  //5

str.number = 10;
alert( str.number );  //undefined

上面代码中，str是一个字符串，本身不是对象，不能调用length属性。JavaScript引擎自动将其转为包装对象，在这个对象上调用length属性。这个临时对象是只读的，无法修改。所以，字符串无法添加新属性。

3.包装对象自定义方法

包装对象还可以在原型上添加自定义方法和属性，供原始类型的值直接调用。

var str = 'hello';

String.prototype.lastValue = function(){
    return this.charAt(this.length-1);
};

alert( str.lastValue() );  //o

二原型链

1 什么是原型链

在下面的例子中，我们创建了两个构造函数，其中LandRover的原型对象又是以Car的原型对象为原型创建的。图示中的红色线即为原型链。

function Car(Logo) {
    this.logo = logo || "unknown name";
}
//设置Car的prototype属性
Car.prototype = {
    start:function() {
         console.log('%s start',this.logo);
    },
    run:function() {
         console.log('%s run',this.logo);
    },
    stop:function() {
         console.log('%s stop',this.logo);
    }
};

//又创建一个构造函数landRover
function LandRover(serialno) {
    this.serialNumber = serialno;  //序列号
}
//设置LandRover的prototype属性
LandRover.prototype = new Car("landRover"); //使用Car创建一个新对象，并把它赋给LandRover构造函数的原型

//创建LandRover对象
var landRover1 = new LandRover("1000");
var landRover2 = new LandRover("1001");

Car.prototype对象也是由Object来创建的，所以它的原型指向Object.prototype

2 原型链上的属性操作

修改、删除属性时，只能修改、删除对象自身的属性

①访问：假如我们想访问landRover1的serialNumber属性，那么直接在它的本身就可以找到；如果我们要访问landRover1的toString方法，它本身是没有的，就会顺着原型链一直网上寻找，直到找到或者没有。

②修改及删除：

操作1：

landRover1.Logo = landRover1;

因为landRover1本身并没有Logo，虽然它可以访问landRover.protoype的Logo属性，但是它无法修改，所以这时它会在自己身上加一个Logo属性，并赋值为landRover1，对landRover.protoype中的Logo属性并无影响

操作2：

delete(landRover1.Logo);

我们把landRover1的Logo属性删除了，但是当我们访问landRover1.Logo时，还是可以访问到的，因为它删除的是自身的属性，对原型上的属性无影响，即使再次做修改操作，也是无效的

3 一切皆对象

①函数在JS中也是对象，所以，Car和LandRover 这些构造函数其实也是一个对象，既然是对象，肯定就有原型，而Car和LandRover 则是由new Function创建出来的，所以LandRover和Car都有一个原型即Function.prototype。

②而Function.prototype是由new Object创建出来的，所以Function.prototype的原型指向Object的原型，也就是Object.prototype。

③Object.prototype是所有原型的顶层。

三面向对象的一些属性和方法

1.hasOwnProperty()

1）作用

判断传入的属性是否为对象自身的属性

理解原型查找原理：对象查找先在该构造函数内查找对应的属性，如果该对象没有该属性的话，那么javascript会试着从该原型上去查找，如果原型对象中也没有该属性的话，那么它们会从原型中的原型去查找，直到查找的Object.prototype也没有该属性的话，那么就会返回undefined。

2）实例

因此我们仅想在该对象内查找的话，为了提高性能，我们可以使用hasOwnProperty()来判断该对象内有没有该属性，如果有的话，就执行代码(使用for-in循环查找)，如下：

var obj = {
    "name":'moon',
    "age":'28'
};
// 使用for-in循环
for(var i in obj) {
    if(obj.hasOwnProperty(i)) {
        console.log(obj[i]);    //moon 28
    }
}

如上使用for-in循环查找对象里面的属性，但是我们需要明白的是：for-in循环查找对象的属性，它是不保证顺序的，for-in循环和for循环最本质的区别是：for循环是有顺序的，for-in循环遍历对象是无序的，因此我们如果需要对象保证顺序的话，可以把对象转换为数组来，然后再使用for循环遍历即可;

2.constructor

1）作用

查看对象的构造函数

function Aaa(){
}
var a1 = new Aaa();
alert( a1.constructor );  //Aaa

2）constructor属性

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

每个原型都会自动添加constructor属性

function Aaa(){
}
//系统会自动添加上
//Aaa.prototype.constructor = Aaa;   
//每一个函数都会有的，都是自动生成的

由于constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承。

3）避免修改construtor属性

function A() {}
var a = new A();
a instanceof A // true

function B() {}
A.prototype = B.prototype;
a instanceof A // false

上面代码中，a是A的实例。修改了A.prototype以后，constructor属性的指向就变了，导致instanceof运算符失真。

所以，修改原型对象时，一般要同时校正constructor属性的指向。

// 避免这种写法
C.prototype = {
  method1: function (...) { ... },
  // ...
};

// 较好的写法
C.prototype = {
  constructor: C,
  method1: function (...) { ... },
  // ...
};

// 好的写法
C.prototype.method1 = function (...) { ... };

3.instanceof运算符

1）作用

对象与构造函数在原型链上是否有关系

function Aaa(){
}

var a1 = new Aaa();
alert( a1 instanceof Object );  //true

2）判断数据类型

请戳这里

4.toString() :

1）作用

把对象转成字符串

这个方法是原型上的，我们可以修改这个方法，但是不建议这样做

var arr = [1,2,3];

Array.prototype.toString = function(){
    return this.join('+');
};

alert( arr.toString() );  //'1+2+3'

2）判断数据类型

利用toString方法来做类型判断

四对象的继承

1.什么是继承

在原有对象的基础上，略作修改，得到一个新的对象
不影响原有对象的功能

当新创建的对象添加了新的属性和方法时，肯定不能直接用new+构造函数这种方法来直接创建了，因为在添加属性或者方法的时候，也会影响到原来的对象。那我们应该如何实现呢？

2.拷贝继承

方式：

属性的继承 : 调用父类的构造函数 call
方法的继承 : for in : 拷贝继承 (jquery也是采用拷贝继承extend)

function Person(name) {
    this.name = name;
}
Person.prototype.talk = function(name) {
    console.log('My name is '+this.name);
};
var p1 = new Person('moon');
// console.log(p1.name);
// p1.talk();
function Person1(name,age) {
    Person.call(this,name); //这里需要改变this的指向
    this.age = age;
}
function extend(obj1,obj2){
    for (var attr in obj2) {
        obj1[attr] = obj2[attr]; //这个地方不能用"."
    }
}
extend(Person1.prototype,Person.prototype);
var p2 = new Person1('yao',18);
console.log(p1.name); //moon
console.log(p2.name); //yao
p2.talk(); //My name is yao

3.类继承

利用构造函数(类)继承的方式。

首先声明，JS中是没有类的概念的，这里说的类是把JS中的构造函数看做类。

先来看看所谓的一步继承法

function Person1() {
    this.name = [1,2,3];
}
Person1.prototype.talk = function(name) {
    alert(this.name);
};

function Person2() {}
Person2.prototype = new Person1();

var p1 = new Person2();
p1.talk();
alert( p1.constructor ); //Person1

p1.name.push(4);
var p2 = new Person2();
console.log(p1.name);  //[1,2,3,4]
console.log(p2.name);  //[1,2,3,4]

缺陷：

1.修改了构造函数的指向

2.创建出来的对象之间会相互影响

正确做法：属性和方法分开继承。

function Person1() {
    this.name = [1,2,3];
}
Person1.prototype.talk = function(name) {
    alert(this.name);
};

function Person2() {
    Person1.call(this); //属性继承仍采取之前的call调用父类的构造函数的方法
}
function Foo() {}  //避免继承属性，只继承方法
Foo.prototype = Person1.prototype;
Person2.prototype = new Foo();
Person2.prototype.constructor = Person2; //修正指向问题

var p1 = new Person2();

p1.talk();
alert( p1.constructor );
p1.name.push(4);
var p2 = new Person2();
console.log(p1.name);  //[1,2,3,4]
console.log(p2.name);  //[1,2,3]

4.原型继承

利用原型prototype来实现继承，一般用来下面这种情况：

function cloneObj(obj){

    var F = function(){};
    F.prototype = obj;
    return new F();

}
var a = {
    name : '小明'
};

var b = cloneObj(a);
alert( b.name ); // 小明

b.name = '小强';
alert( b.name ); //小强
alert( a.name ); //小明

我们来看一下关系图，假设 new F() =f1

无标题.png

 第一次执行alert( b.name );时，因为b没有这个属性，所以它会顺着原型链往上找，知道找到a下面的name:小明
 
 执行b.name = '小强';因为b本身是没有name这个属性的，它虽然可以访问a下面的name属性，但是无法修改，所以这时它会在自己身上加一个name属性，并赋值为“小强”，对a中的name属性并无影响

 执行alert( a.name ); 的时候，根据原型链的查找规则，它肯定不会查找到b下面去，更何况a本身就有name属性，所以弹出来的还是“小明”

5.小结：

拷贝继承: 通用型的,有new或无new的时候都可以
类式继承: 通过new构造函数形式
原型继承: 无new的对象

原文:大专栏面向对象编程（2） - liyaozr