理解js的对象，对象创建，继承

js对象概述

理解js对象

js对象的属性在创建时都带有一些特征值，js通过这些特征值来定义它们的行为。

属性类型

1.数据属性

数据属性包含一个数据值的位置，在这个位置可以读取和写入值

2.访问器属性

定义多个属性

读取属性的特性

创建对象

虽然Object构造函数，对象字面量都可以来创建对象，但这些方式有个缺点：在使用同一个接口创建很多对象的时候，会产生大量重复代码，所以在创建对象的时候，可以使用一些模式来进行创建：

工厂模式

/**
 * 工厂模式——创建对象
 * 解决了很多创建类似对象的问题，但却没有解决对象识别的问题
 * @param name
 * @param age
 * @param job
 * @returns {Object}
 */
function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson("sqliang",23,"IT");

构造函数模式

/**
 * 构造函数模式——创建对象
 * 创建自定义的构造函数，从而定义自定义对象类型的属性和方法。
 * 不同点：
 * 1.没有显示地创建对象
 * 2.直接将属性和方法赋给了this对象
 * 3.没有return语句
 *
 * 构造函数的缺点：会导致不同的作用域链和标识符解析，但
 * 创建Function新实例的机制仍然是相同的
 * 每个方法都要在每个实例上重新创建一遍
 *
 * @param name
 * @param age
 * @param job
 * @constructor
 */
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name);
    };
}
var person2 = new Person("sqliang2",24,"ITT");

Person("cyy",23,"haha");//作为普通函数调用，添加到window对象
var person3 = new Object();
Person.call(person3,"sqliang",24,"TTI");//在另一个对象作用域中调用Person函数

原型模式

/**
 * 原型模式——创建对象
 *与构造函数不同，新对象的这些属性和方法是由所有实例共享的
 * 原型最初只包含constructor属性，该属性也是共享的
 * @constructor
 */
function PersonWithProto(){
    PersonWithProto.prototype.name = "sqliang";
    PersonWithProto.prototype.age = 23;
    PersonWithProto.prototype.job = "IT";
    PersonWithProto.prototype.sayName = function(){
        console.log(this.name);
    };
}
var per1 = new PersonWithProto(),
    per2 = new PersonWithProto();
//可以通过isPrototypeOf()来确定对象之间是否存在原型关系
console.log(PersonWithProto.prototype.isPrototypeOf(per1));//true
//ES5新增方法getPrototypeOf()来获取Prototype的值
console.log(Object.getPrototypeOf(per2) === Person.prototype);//true
console.log(Object.getPrototypeOf(per2).name);//"sqliang"

//可以通过对象实例访问保存在原型中的值，但是不能通过对象实例修改原型对象中的值
per2.name = "hehe";
console.log(per2.name);//"hehe"
console.log(per1.name);//"sqliang"
delete per2.name;

console.log(per1.hasOwnProperty("name"));//false
console.log("name" in per1);//true

per1.name = "cyy";
console.log(per1.name);//"cyy"
console.log(per1.hasOwnProperty("name"));//true
console.log("name" in per1);//true

//同时使用in 和 hasOwnProperty可以检测该属性是存在于对象中，还是存在于原型中
/**
 * 检测对象是否含有某原型属性
 * @param obj
 * @param name
 * @returns {boolean}
 */
function hasPrototypeProperty(obj,name){
    return !obj.hasOwnProperty(name) && (name in obj);
}
//原型模式更简单的实现
/**
 * 更简单的实现原型模式——创建对象
 * *****************注意：此时constructor属性不再指向Animal了，而是Object*****************
 * ****原因：
 * 每创建一个对象时，会同时创建它的prototype对象，这个对象也会自动获取constructor属性。而下面的
 * 语法，本质上完全重写了默认的constructor属性，不再指向Animal了，指向了Object。此时，尽管instanceof
 * 还可以返回正确的结果，但通过constructor已经无法确定对象的类型了
 * @constructor
 */
function Animal(){}
Animal.prototype = {
    name : 'sqliang',
    age : 23,
    job : 'softwares Engineer',
    sayName : function(){
        console.log(this.name);
    }
};
var ani = new Animal();
console.log(ani instanceof Object);//true
console.log(ani instanceof Animal);//true
console.log(ani.constructor == Animal);//false
console.log(ani.constructor == Object);//true

//因此需要加上constructor属性
/**
 * 这种重设constructor属性会导致他的[[Enumerable]]特性被设置为true。默认情况下，
 * 原生的constructor是不可枚举的
 * @constructor
 */
function Animals(){}
Animals.prototype = {
    constructor : Animals,
    name : 'sqliang',
    age : 18,
    job : 'Softwares Engineer',
    sayName : function(){
        console.log(this.name);
    }
};
//所以，如果使用的是ES5的js引擎，可以重设构造函数，即：
function Animals2(){}
Animals2.prototype = {
    name : 'sqliang',
    age : 18,
    job : 'Softwares Engineer',
    sayName : function(){
        console.log(this.name);
    }
};
//重设构造函数，只适用于ES5兼容的浏览器
Object.defineProperty(Animals2.prototype,'constructor',{
    enumerable : false,
    value : Person
});

组合使用构造函数和原型模式

/**
 * 组合使用构造函数模式和原型模式——创建对象
 * 原型模式用于定义方法和共享的属性，构造函数模式用于定义实例属性。
 * 使得：
 * 每个实例都有自己的一份实例属性的副本，但同时又共享着对方法的引用
 * 最大限度地节省了内存。这种汇合模式还支持向构造函数传递参数，集两种模式之长
 * @param name
 * @param age
 * @param job
 * @constructor
 */
function Man(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}
//重写了原型属性，要指定constructor，否则指向了Object
Man.prototype = {
    constructor : Man,
    sayName : function(){
        console.log(this.name);
    }
};

动态原型模式（推荐使用的一种模式）

/**
 * 动态原型模式————创建对象
 * 把所有信息封装在构造函数中，通过在构造函数中初始化原型，又
 * 保持了同时使用构造函数和原型的有点，还可以通过检查某个应该存在的方法
 * 是否有效，来决定是否需要初始化原型
 * @param name
 * @param age
 * @param job
 * @constructor
 */
function Per(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["cyy","yyc"];

    //检测
    if(typeof this.sayName != "function"){
        Per.prototype.sayName = function(){
            console.log(this.name);
        }
    }
    Per.prototype.getHand = function(){
        console.log("two hands");
    }
    Per.prototype.hit = function(){
        console.log("I will hit you.");
    }
}

寄生构造函数模式

/**
 * 寄生构造函数模式——创建对象
 * 返回的对象与构造函数或者与构造函数的原型之间没有关系
 *
 * 除了使用时用new操作符，病叫做构造函数之外，与工厂模式没有差别
 * 这个模式可以在特殊情况下用来为对象创建构造函数。如：
 * 创建一个具有额外方法的特殊数组，由于不能直接修改Array构造函数，
 * 因此可以使用这个模式。
 * @returns {Array}
 * @constructor
 */
function SpecialArray(){
    var arr = new Array();
    arr.push.apply(arr,arguments);//添加值
    arr.toPipedString = function(){
        return this.join("&");
    }
    return arr;
}
var colors = new SpecialArray("red","blue","green");
console.log(colors.toPipedString());//"red&blue&green"

稳妥构造函数模式

/**
 * 稳妥构造函数模式——创建对象，稳妥对象指没有公共属性，而且其方法也不引用this的对象。
 * 该模式遵循与寄生构造函数类似的模式，但是创建对象的实例方法不引用this，不使用new
 * 操作符调用构造函数
 * 最适合在一些安全环境中（禁止使用this和new的环境），或者在纺织数据被其他应用程序
 * 改动时使用。
 * @param name
 * @param age
 * @constructor
 */
function Wemon(name,age){
    var o = new Object();
    var hello = "Hello";
    o.sayName = function(){
        console.log(name);
    }
    o.sayHello = function(){
        console.log(hello);
        return hello;
    }
}
var nihao= Wemon("sqliang",23);
nihao.sayName();
nihao.sayHello();

继承

/**
* =====================继承
* 许多OO语言都支持两种继承方式：接口继承，实现继承
* 接口继承只继承方法签名，
* 实现继承继承实现的方法。
* *js只支持实现继承，由于函数没有签名，无法实现接口继承*
* js继承主要依靠原型链来实现的
*/

原型链

/**
 * ====================原型链
 * 基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。
 * 基本模式：让原型对象等于另一个类型的实例
 * 问题：
 * 1，所有子类型的实例会共享超类型的实例属性
 * 2，在创建子类型的实例时，不能像超类型的构造函数传递参数。
 * 即，没有办法在不影响所有对象实例的基础上给超类型传递参数。
 * 因此，实践中很少会单独使用原型链
 * 
 */
function SuperType(){
    this.property = true;
    SuperType.prototype.getSuperValue = function(){
        console.log("Super:" + this.property);
        return this.property;
    }
}
function SubType(){
    this.subProperty = false;
    SubType.prototype.getSubValue = function(){
        console.log("Sub:" + this.subProperty);
        return this.subProperty;

    }
}
//继承了SuperType
SubType.prototype = new SuperType();
var instance = new SubType();
console.log(instance.getSuperValue());

//重写超类型里的方法
SubType.prototype.getSuperValue = function(){
    return false;
}
console.log(instance.getSuperValue());

借用构造函数

/**
 * 继承，借助构造函数
 * 在子类型构造函数内部调用超类型构造函数
 * 借助构造函数的问题：
 * 方法都在构造函数中定义，函数无法复用
 * 在超类型的原型中定义的方法，对子类型是不可见的，
 * 导致所有模式都只能使用构造函数模式
 * （借助构造函数的技术是很少单独使用的）
 */
function SuperColor(){
    this.colors = ["red","green","blue"];
}

function SubColor(){
    //执行了SuperColor（），继承了SuperColor的color属性
    SuperColor.call(this);
}
var ins1 = new SubColor();
ins1.colors.push("black");
console.log(ins1.colors);//["red","green","blue","black"]
var ins2 = new SubColor();
console.log(ins2.colors);//["red","green","blue"]

//传递参数
function SuperMan(name){
    this.name = name;
    SuperMan.prototype.getName = function(){
        console.log(this.name);
        return this.name;
    }
}

function SubMan(){
    //为了确保SuperMan构造函数不会重写子类型的属性，可以在调用超类型构造函数后，
    //再添加应该在子类型中定义的属性
    SuperMan.call(this,"sqliang");
    this.age = 23;
}
var man = new SubMan();
console.log(man.age);

组合式继承

/**
 * 组合继承，（推荐使用）
 * 将原型链和借用构造函数的技术组合到一块，
 * 使用原型链实现对原型属性和方法的继承，借用构造函数来实现对实例属性的继承。
 * @param name
 * @constructor
 */
function SuperStar(name){
    this.name = name;
    this.colors = ["red","blue","green"];
    SuperStar.prototype.getName = function(){
        console.log(this.name);
    }
}

function SubStar(name,age){
    SuperStar.call(this,name);
    this.age = age;
}
//继承方法,先重写，后加sayAge
SubStar.prototype = new SuperStar();
SubStar.prototype.constructor = SubStar;

SubStar.prototype.sayAge = function(){
    console.log(this.age);
};
var star1 = new SubStar("sqliang",23);
star1.colors.push("black");
console.log(star1.colors);//["red","blue","green","black"]
star1.getName();//"sqliang"
star1.sayAge();//23

var star2 = new SubStar("cyy",32);
console.log(star2.colors);//["red", "blue", "green"]
star2.getName();//"cyy"
star2.sayAge();//32

原型式继承

/**
 * 原型式继承（没有严格意义上的构造函数，借助原型基于已有的对象创建新对象
 * 同时还不必因此创建自定义类型）
 * 在这种范式下，person.friends不仅属于person所有，而且也被anotherPerson
 * 和anotherTwo所共享，实际上也就是相当于有创建了person对象的两个副本。
 * 
 */
var person = {
    name : "sqliang",
    friends : ["hello","cyy","lp","gyf","JSF"]
};
var anotherPerson = object(person);
anotherPerson.name = "lsq";
anotherPerson.friends.push("lsq");

var anotherTwo = object(person);
console.log(anotherTwo.name);//"lsq"
console.log(anotherTwo.friends);//["hello","cyy","lp","gyf","JSF","lsq"]

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

寄生式继承

/**
 * 寄生式继承（与原型式继承紧密相关的一种思路）
 * 其思路与寄生构造函数和工厂模式类似，即创建一个用于封装继承过程
 * 的函数，函数在内部以某种方式来增强对象，最后再像真的是它做了所有
 * 工作一样返回对象.
 * 在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种
 * 有用的模式，还有object()不是必需的，任何能够返回新对象的函数都适用
 * 于此模式
 */
function createAnother(original){
    var clone = object(original);
    clone.sayHi = function(){
        console.log("Hi");
    }
    return clone;
}
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

寄生组合式继承(集寄生式和组合继承的优点于一身，是实现基于类型继承的最有效方式)

/**
 * 寄生组合式继承（最有效的，最推荐使用的）
 * 由于组合继承存在不足，即无论在什么情况下，都会调用两次超类型构造函数，
 * 一次是在创建子类型原型时，一次是在子类型构造函数内部。虽然子类型最终会
 * 包含超类型对象的全部实例属性，但是在调用子类型构造函数时重写了这些属性
 * =================而寄生组合式继承，
 * 通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，主要思路是：
 * 不必为了指定子类型的原型而调用超类型构造函数，此时最需要的是超类型原型的一个副本而已。
 * 本质上就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。
 * 这样，高效性就体现在之调用了一次超类型构造函数（在子类型构造函数中），并且避免了在
 * 子类型上创建不必要的、多余的属性，原型链还能保持不变。
 * 因此，还可以正常使用instanceof 和isPrototypeOf(),是目前最理想的继承范式
 */
function SuperBest(name){
    this.name = name;
    this.colors = ["red","green","blue"];
    SuperBest.getName = function(){
        return this.name;
    }
}
function SubBest(name, age){
    SuperBest.call(this,name);
    this.age = age;
}
inheritPrototype(SubBest,SuperBest);
SubBest.prototype.sayAge = function(){
    console.log(this.age);
};
function inheritPrototype(subType,superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}