javaScript面向对象编程

ES5的类

简单类的创建

es5里边创建一个类的方法是通过对function进行实例化(new)，如果一个方法不进行new实例化，也就意味着这只是个方法，而不会成为一个类。只有new过的方法，才能称之为类。

// 通常类名首字母用大写,用于区分普通函数,当然这只是口头约定,不用大写也可以,但是为了确保代码的可读性,通常情况下,类名首字母用大写
function Person() {
    this.name = '小李';
    this.run = function () {
        console.log(this.name + '在运动')
    }
}

Person.prototype.work = function () {
    console.log(this.name + '在工作');
}

var p = new Person();
console.log(p.name);  // 小李
p.run();  // 小李在运动
p.work();  // 小李在工作

Person.getInfo = function () {
    console.log('这是个静态方法。');
}

/**
 *  静态方法指的是在这个类上添加一个方法
 */

Person.getInfo() // 这是个静态方法。

原型链上的属性会被多个实例共享,而构造函数不会。

es5对象继承

es5的继承主要是使用: 对象冒充继承+原型链继承两种合并的混合继承方式。

• 第一种对象冒充继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + '在运动')
    }
}

Person.prototype.work = function () {
    console.log(this.name + '在工作')
}

function Web(name, age) {
    Person.call(this, name, age); // 这一步叫做对象冒充继承
}


var w = new Web('王五', 20);

w.run() // 王五在运动
w.work() // 报错了 Uncaught TypeError: w.work is not a function

对象冒充继承的弊端就是不能获得原型链上的方法和属性,但是可以在实例化的时候传入参数通过 call()

• 第二种 原型链继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + '在运动')
    }
}

Person.prototype.work = function () {
    console.log(this.name + '在工作')
}

function Web(name, age) {

}

Web.prototype = new Person();

var w = new Web('王五', 20);

w.run() // undefined在运动
w.work() // undefined在工作

原型链继承虽然可以执行原型链的方法,但是无法传值,所以说可以结合两者的优点,完成完美的继承方案。

• 原型链继承+对象冒充继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + '在运动')
    }
}

Person.prototype.work = function () {
    console.log(this.name + '在工作')
}

function Web(name, age) {
    Person.call(this, name, age);
}

Web.prototype = new Person();
// 下边这种方式也行,上下两行写一行就行,下边一行的意思是,直接把原型链上的所有属性和方法都赋值过去,上边的写法就是把实例放到Web的原型链上,都是赋值的原理。就是赋值的东西不太一样。
// Web.prototype = Person.prototype;

var w = new Web('王五', 20);

w.run() // 王五在运动
w.work() // 王五在工作

通常使用的就是混合继承方式

new 这个修饰符到底做了什么？

function Person() {
    this.name = '小李';
    this.run = function () {
        console.log(this.name + '在运动')
    }
}

var p = new Person();

function Web() {
    this.namePro = 'web';
    this.work = function () {
        console.log(this.name + '在工作')
    }
}

// 如果不new
Web.namePro // undefined
Web.work() // 报错  Uncaught TypeError: Web.work is not a function

使用关键字new创建新实例对象经过了以下几步：

1、创建一个新对象，如：var person = {};

2、新对象的proto属性指向构造函数的原型对象。

3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）

4、执行构造函数内部的代码，将属性添加给person中的this对象。

5、返回新对象person。

     function Person(name , age){
         this.name = name;
         this.age = age;
         console.log(this); // Person {name: "neo", age: "23"}
         //return this; 默认隐藏
     }
     var p1 = new Person('neo','10');
     console.log(p1.name);

    // 等同于：
     function Person(name , age){
         this.name = name;
         this.age = age;
         console.log(this); //window
         return this;
     }
     var p1 = new Object(); //var p1 = {}
     p1 = Person('neo','23');
     console.log(p1.name);