JS——面向对象基础

概念

只关注对象提供的功能，不关注内部细节。

JS的面向对象

特点：

抽象：捉住核心（获取需要的内容）

封装：只考虑使用功能，不考虑原理

继承：继承父类方法、属性，子类又有自己的特性

    1）多重继承（多个父类）

    2）多态

对象的组成

方法/函数：

方法：属于一个对象

函数：自由的，不属于任何人

过程、动态的

属性 / 变量：

属性：属于一个对象

变量：自由的，不属于任何人

状态、静态的

对象添加方法和属性

This

当前的方法属于谁，this就是谁。

注意事项

不能在系统内置对象中随意添加方法、属性，否则会覆盖已有方法、属性。

Object对象

Object对象，没有功能。

所以我们可以往它身上添加方法、属性。

实例：

function createInf( name, age){
    //创建（原料）
    var myObj = new Object();

    //添加属性（加工）
    myObj.name = name;
    myObj.age  = age ;

    //添加方法（加工）
    myObj.showName = function(){
        alert("我的名字是：" + this.name);
    };

    myObj.showAge = function(){
        alert("我的年龄是：" + this.age);
    };

    //记得返回对象出去，才能使用（出厂）
    return myObj;
}

//创建实例
var obj1 = createInf("Tim Chen","22");

//调用方法
obj1.showName();
obj1.showAge();

上面的createInf函数，它的作用是构建一个对象，这种函数就被称作构造函数。

工厂方式

上面构造函数的方式，叫做工厂方式。

它包含原料、加工、出厂这三个流程。

问题

1. 没有new

使用工厂方式的构造函数创建实例时，不能用new关键字创建。

2. 函数重复

每创建一个实例，该实例就会有构造函数设置的相应数量的方法。

浪费系统资源。

解决方法

1. 使用new关键字创建实例

我们需要把所有属性、方法的前缀都换成this，

原料、出厂部分不用写。

function createInf( name, age){

    //系统偷偷帮我们创建一个对象
    //var this = new Object();

    //添加属性（加工）
    this.name = name;
    this.age  = age ;

    //添加方法（加工）
    this.showName = function(){
        alert("我的名字是：" + this.name);
    };

    this.showAge = function(){
        alert("我的年龄是：" + this.age);
    };

    //系统帮我们返回
    //return this;
}

//创建实例
var obj1 = new createInf("Tim Chen","22");

//调用方法
obj1.showName();
obj1.showAge();

2. 函数重复

构造函数里写属（不一样的东西），原型上添加方法（一样的东西）。

类名首字母大写。

实例：

function CreateInf( name, age){

    //系统偷偷帮我们创建一个对象
    //var this = new Object();

    //添加属性（加工）
    this.name = name;
    this.age  = age ;

    //系统帮我们返回
    //return this;
}

//往createInf原型上添加方法
CreateInf.prototype.showName = function(){
    alert("我的名字是：" + this.name);
};

CreateInf.prototypeshowAge = function(){
        alert("我的年龄是：" + this.age);
};


//创建实例
var obj1 = new CreateInf("Tim Chen","22");

//调用方法
obj1.showName();
obj1.showAge();

原型（prototype）

可以理解为CSS里的class。

实例：

var arr1 = new Array(11,12,13,14,15);
var arr2 = new Array(21,22,23,24,25);

Array.prototype.sum = function(){    // class
//arr1.sum = function(){             //行间样式

    var result = 0;

    for(var i = 0; i < this.length; i++){
        result += this[i];
    }

    return result;
};

alert(arr1.sum());
alert(arr2.sum());

如果只给arr1添加方法，很显然arr2没有sum方法，会报错。

如果arr1、arr2都想要sum方法，那就需要在原型上添加方法。

这就好比行间样式跟class。

类、对象

类: 模版

对象: 成品


例如：

var arr = new Array(1,2,3);

Array  类

arr    对象

我们只能arr.push( )，而不能Array.push( )。因为类是没有功能的。

而对象，也不能像模板那样new arr( )生成别的东西。