02-ECMAScript6面向对象

1. 继承

1.1 继承的三种方式

function Dad(height){
    this.name = "张三";
    this.age = 20;
    this.height = height;
    this.money = "$1000000";
}
function Son(height){
    Dad.call(this,height);
    // Dad.apply(this,[height]);
    // Dad.bind(this)(height);
}
let newSon = new Son("178cm");

1-2. 继承原型

• 无法直接继承父类原型

function Dad(height){
    this.name = "张三";
    this.age = 20;
    this.height = height;
    this.money = "$1000000";
}
Dad.prototype.hobby = function(){
    console.log("喜欢高尔夫");
}
function Son(height){
    Dad.bind(this)(height);
}
let newSon = new Son("178cm");
newSon.hobby();
>Uncaught TypeError: newSon.hobby is not a function

• 通过Son.prototype = Dad.prototype

function Dad(height){
    this.name = "张三";
    this.age = 20;
    this.height = height;
    this.money = "$1000000";
}
Dad.prototype.hobby = function(){
    console.log("喜欢高尔夫");
}  
function Son(height){
    Dad.bind(this)(height);
}
Son.prototype = Dad.prototype;
let newSon = new Son("178cm");
newSon.hobby();

存在问题——传值传址

function Dad(height){
    this.name = "张三";
    this.age = 20;
    this.height = height;
    this.money = "$1000000";
}

Dad.prototype.hobby = function(){
    console.log("喜欢高尔夫");
}  
function Son(height){
    Dad.bind(this)(height);
}
Son.prototype = Dad.prototype;
Son.prototype.hobby = function(){
    console.log("篮球");
}
let newSon = new Son("178cm");
newSon.hobby();
let newDad = new Dad("179cm");
newDad.hobby();
>篮球
>篮球

• 组合继承

let Link = function(){};
Link.prototype = Dad.prototype;
Son.prototype = new Link();

function Dad(height){
this.name = "张三";
    this.age = 20;
    this.height = height;
    this.money = "$1000000";
}

Dad.prototype.hobby = function(){
    console.log("喜欢高尔夫");
}  
function Son(height){
    Dad.bind(this)(height);
}
let Link = function(){};
Link.prototype = Dad.prototype;
Son.prototype = new Link();
Son.prototype.hobby = function(){
    console.log("篮球");
}
let newSon = new Son("178cm");
newSon.hobby();
let newDad = new Dad("179cm");
newDad.hobby();
>篮球
>喜欢高尔夫

1-3. 深拷贝继承

function deepCopy(obj){
    let newObj = Array.isArray(obj)?[]:{};
    for(let i in obj){
        if(obj.hasOwnProper(i)){
            if(typeof obj[i] === "object"){
            if(obj[i] === null){
                newObj[i] = null;
            }else{
                newObj[i] = deepCopy(obj[i]);
            }
            }else{
                newObj[i] = obj[i];
            }
        }
    }
    return newObj;
}

function deepCopy(obj){
    let newObj = Array.isArray(obj)?[]:{};
    for(let i in obj){
        if(obj.hasOwnProper(i)){
            if(typeof obj[i] === "object"){
            if(obj[i] === null){
                newObj[i] = null;
            }else{
                newObj[i] = deepCopy(obj[i]);
            }
            }else{
                newObj[i] = obj[i];
            }
        }
    }
    return newObj;
}
let fn1 = {
    name:"张三",
    arr:[1,2,30],
    text: undefined,
    fn:function(){
        console.log("...")
    }
}
let fn2 = deepCopy(fn1);
fn2.name = "离散";
console.log(fn1, fn2)
>{name: "张三", arr: Array(3), text: undefined, fn: ƒ}
>{name: "离散", arr: Array(3), text: undefined, fn: ƒ}  

1-4. 继承原型与深拷贝继承

let Link = function(){};
Link.prototype = Dad.prototype;
Son.prototype = new Link();

相当于

Son.prototype = deepCopy(Dad.prototype)  

2. 原型链

查找属性顺序：

function Drag(){
    this.ele = "some value";
}
Drag.prototype.ele = "prototype value...";
Object.prototype.ele = "object value... "
let drag1 = new Drag();
console.log(drag1.ele);
>some value

3. ES类

class Drag{
	constructor(){
		this.name = "张三";
	}
	hobby(){
		console.log("篮球");
	}
}
let drag1 = new Drag();

• 静态声明属于类，动态则属于类的实例化

class Drag{
    static test(){
        console.log("test...");
    }
	constructor(){
		this.name = "张三";
	}
	hobby(){
		console.log("篮球");
	}
}
Drag.test();
>test...

4. ES6类继承

4-1. 继承父类

class LimitDrag extends Drag{
    constructor(age){
        super(age);  
    }
}

class Drag{
    static height = "178cm";
    static test(){
        console.log("test...");
    }
	constructor(age){
        this.name = "张三";
        this.age = age;
	}
	hobby(){
		console.log("篮球");
	}
}

class LimitDrag extends Drag{
    constructor(age){
        super(age);  
    }
}

4-2. 重写方法不覆盖父类的方法

hobby(){
    super.hobby();
    console.log("乒乓球");
}

class Drag{
    static height = "178cm";
    static test(){
        console.log("test...");
    }
	constructor(age){
        this.name = "张三";
        this.age = age;
	}
	hobby(){
		console.log("篮球");
	}
}

class LimitDrag extends Drag{
    constructor(age){
        super(age);  
    }
    hobby(){
        super.hobby();
        console.log("乒乓球");
    }
}
let drag1 = new LimitDrag(10);
let drag2 = new LimitDrag(20); 
drag2.hobby();
>篮球
>乒乓球

5. 判断类型

• constructor（√）

// 类型判断效果好
let arr = "a";
console.log(arr.constructor === String);
>true
console.log(arr.constructor === Object);
>false

• instanceof（×）

// 类型判断效果不好
let arr = new String("a"); 
console.log(arr instanceof String);
>true
console.log(arr instanceof Object);
>true

let arr = "a";
console.log(arr instanceof String);
>false
console.log(arr instanceof Object);
>false

• typeof

// 判断类型效果不好
let arr = [1];
console.log(arr.constructor);
>Array
console.log(typeof arr);
>object