JavaScript进阶-面向对象（ES5中的构造函数和原型）

三、JavaScript进阶-面向对象

ES5中的构造函数和原型

利用构造函数创建对象

/**
 * 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。
 * 我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
  *
  * 在 JS 中，使用构造函数时要注意以下两点：
  *      构造函数用于创建某一类对象，其首字母要大写
  *      构造函数要和 new 一起使用才有意义
 */
function Star(uname, age) {
     /** 1、实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问 */
       this.uname = uname
    this.age = age
    this.say = function () {
        console.log('Hello')
    }
}

/** 2、静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问 */
Star.sex = '男'

let ldh = new Star('刘德华', 18)
let zxy = new Star('张学友', 18)
console.log(ldh.sex); // undefined
console.log(Star.sex); // 男
console.log(ldh.say === zxy.say) // false

原型对象

/******************************* 一、prototype *******************************/
function Animal(age) {
 this.age = age
}

/**
 * 构造函数原型 prototype
 * JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。
 * 注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
 * 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法
 * prototype 里面的 this 指向的是实例对象
 */
Animal.prototype.say = function () {
    console.log('Hello')
}

let cat = new Animal('cat')
let dog = new Animal('dog')
console.log(cat.say === dog.say) // true
/**
 * 对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象
 * __proto__对象原型和原型对象 prototype 是等价的
 */
console.log(Animal.prototype === dog.__proto__) // true

/******************************* 二、constructor *******************************/
/**
 * 对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性
 * constructor 我们称为构造函数，因为它指回构造函数本身
 */
function Person(uname, age) {
    this.uname = uname
    this.age = age
}

Person.prototype = {
    /**
     * 一般情况下，对象的方法都在构造函数的原型对象中设置
     * 如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容
     * 这样修改后的原型对象 constructor  就不再指向当前构造函数了
     * 此时，我们可以在修改后的原型对象中，添加一个 constructor 重新指向原来的构造函数
     */
    constructor: Person,
    sex:'女',
    sing: function () {
        console.log('唱歌');
    },
    movie: function () {
        console.log('演电影');
    }
}

let personOne = new Person('dzq', 18)
personOne.sex = '男'
/** 
 * 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
 * 如果没有就查找它的原型（也就是 __proto__ 指向的 prototype 原型对象）
 * 如果还没有就查找原型对象的原型（Object的原型对象）
 * 依此类推一直找到 Object 为止（null）
 * __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
 */
personOne.sing()
console.log(personOne.sex) // 男

利用原型对象对内置对象进行扩展

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。
　　比如给数组增加自定义求偶数和的功能

/** 数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式。 */
Array.prototype.sum = function () {
let sum = 0;
for (let i = 0; i < this.length; i++) {
  sum += this[i];
}
return sum;
};
let arr = [1, 2, 3];
console.log(arr.sum());
console.log(Array.prototype);
let arr1 = new Array(11, 22, 33);
console.log(arr1.sum());

利用构造函数和原型对象实现继承

call()方法简介

function fn(x, y) {
 console.log('Hello')
 console.log(this)
 console.log(x + y)
}
let o1 = {
 name: 'andy'
}
/**
 * 调用这个函数, 并且修改函数运行时的 this 指向
 * fun.call(thisArg, arg1, arg2, ...)
 * thisArg ：当前调用函数 this 的指向对象
 * arg1，arg2：传递的其他参数
 */
fn.call(o1, 2, 3)

利用构造函数继承父类中的属性和方法

function Father(uname, age) {
    this.uname = uname
    this.age = age
}
Father.prototype.money = function () {
    console.log('1000000￥')
}

function Son(uname, age, score) {
    /** 此时父类的 this 指向子类的 this，同时调用这个函数 【继承父类中的属性】 */
    Father.call(this, uname, age)
    this.score = score
}
Son.prototype.exam = function () {
    console.log('考试中...')
}

/**  Son.prototype 的 __proto__ 对象原型指向Father的 prototype 原型对象 【继承父类中方法】 */
Son.prototype.__proto__ = Father.prototype

Son.prototype= new Father()
let son = new Son('刘德华', 21, 150)
son.money()
console.dir(son)

ES6中类的本质

class 本质还是 function
类的所有方法都定义在类的 prototype 属性上
类创建的实例,里面也有 __ proto __ 指向类的 prototype 原型对象
所以ES6的类它的绝大部分功能，ES5都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
所以ES6的类其实就是一种便捷写法、简单理解