JS继承模式、对象枚举

继承模式

继承发展史

1. 传统的继承形式：原型链

• 过多的继承了没用的属性
• 无法保证只继承想继承的东西，降低效率

Grand.prototype.lastname = 'J'
function Grand() {
    this.name = 'Mike'
}
var grand = new Grand();
Father.prototype = grand;
function Father() {
    this.name = 'Bob'
}
var father = new Father();
Son.prototype = father;
function Son() {
    this.name = 'Tom'
}
var son = new Son();

2. 借用构造函数

• 不能继承借用构造函数的原型
• 每次构造函数都要多走一个函数
• 利用call/apply

function Person(name,age,sex) {
    this.name = name,
    this.age = age,
    this.sex = sex
}

function Student(name,age,sex,grade) {
    Person.call(this,name,age,sex);
    this.grade = grade;
}

var student = new Student('Mike',19,'male',2);

3. 共享原型

• 不能随便改动自己的原型

Father.prototype.lastname = 'J';
function Father() { }
function Son() { }
// Son.prototype = Father.prototype
function inherit(Target,Origin) {
    Target.prototype = Origin.prototype;
}   //将Son.prototype = Father.prototype这句的功能变为函数
inherit(Son,Father);    //调用inherit函数
var son = new Son();
var father = new Father();
Son.prototype.age = 19;    //当进行此句时，Father的prototype.age也会变为19。
                           //因为两个函数的prototype都指向同一空间。
                           //所以一个发生改变，另一个也会发生改变

4. 圣杯模式

• 写法1

function inherit(Target,Origin) {
    function F() { };
    F.prototype = Origin.prototype;
    Target.prototype = new F();    //顺序很重要
    Target.prototype.constructor = Target;
    Target.prototype.uber = Origin.prototype;  
}
Father.prototype.lastname = 'J';
function Son() {
    this.name = 'Mike';
}
function Father() {
    this.name = 'Tom';
}
inherit(Son,Father);
Son.prototype.age = 19;
var son = new Son();
var father = new Father();    //此时son.age = 19
                              //father.age为undefined
                              //实现共同继承，也可以拥有自己的prototype属性

• 写法2

var inherit = (function (){
    var F = function () {};    //此时F为该函数内部的私有变量
    return function (Target,Origin){
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constructor = Target;
        Target.prototype.uber = Origin.prototype; 
    }    //将该函数体返回
}())   //立即执行函数
inherit(Son,Father);
Father.prototype.lastname = 'J';
function Son() {
    this.name = 'Mike';
}
function Father() {
    this.name = 'Tom';
}
Son.prototype.age = 19;
var son = new Son();
var father = new Father();

• 两种方法实现功能一致

模仿jQuery库实现连续调用

var person = {
    name : function () {
        console.log('name');
        return this;
    },
    age : function () {
        console.log(19);
        return this;
    },
    sex : function () {
        console.log('male');
        return this;
    }
}
person.name().age().sex()
// 结果：
// name
// 19
// male

属性的表示方法

var score = {
    NO1 : '90',
    NO2 : '89',
    NO3 : '85',
    NO4 : '80',
    search : function (num) {
        return this['NO' + num];   //实现字符串拼接
                                   //若不用字符串拼接，则必须用switch结构或是if结构来实现功能
    }
}   //score.NO1相当于score[NO1]
    //系统内部实现score.NO1 -->score[NO1]

对象枚举

• for in

var person = {
    name : 'Mike',
    age : 19,
    sex : 'male'
};
for(var prop in person) {
    console.log(person[prop]);
}
//结果： 
//Mike
//19
//male

• hasOwnProperty方法

var person = {
    name : 'Mike',
    age : 19,
    sex : 'male',
    __proto__ : {
        height : 180,
    }
};
for(var prop in person) {
    if(person.hasOwnProperty(prop))
    {
        console.log(person[prop]);
    }
}    //当没有if判断时，会打印Mike，19，male，180
     //加上if判断后，hasOwnPrototype方法判断当前属性是否为系统自设，若不是系统自设属性，则打印，反之，则不进行操作
//结果：
//Mike
//19
//male

• in

var person = {
    name : 'Mike',
    age : 19,
    sex : 'male',
    __proto__ : {
        height : 180,
    }
};
// 'name' in person
// 返回true
// 'height' in person
// 返回true

• instanceof

1. A instanceof B
2. A对象是不是B构造函数沟造出来的
3. 看A的原型链上的有没有B的原型

function Person() { };
var person = new Person();
var obj = {};
// person onstanceof Person
// 结果：true
// [] instanceof Array
// 结果：true
// obj instanceof Object
// 结果：true

区别数组和对象

1. tostring方法

Object.prototype.toString.call([])
'[object Array]'
Object.prototype.toString.call({})
'[object Object]'

2. constructor方法

当obj为{}时
obj.constructor
ƒ Object() { [native code] }
当obj为[]时
obj.constructor
ƒ Array() { [native code] }

3. instanceof方法

当obj为{}时
obj instanceof Array
false
当obj为[]时
obj instanceof Array
true