继承相关问题

问题11：继承有什么作用?

• 概念：继承就是子类拥有父类的属性和方法，
• 作用：
• 父类中是更加通用的属性和方法，通过继承，子类拥有父类的属性和方法，不需要重新去写这些重复的代码，提高了代码的重用性，
• 想要给所有子类修改属性和方法，只要在父类中修改就能“牵一发而动全身”，所有子类都修改了，提高了代码的可维护性
• 直接给子类添加新的属性和方法，子类就会拥有这些属性和方法，表现出多态化，而父类不会被“污染”，提高了代码的独立性

问题12： 下面两种写法有什么区别?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饥人谷', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);

/*方法一创建的实例，它的 printName 方法是在自己的属性上，
每创建一个实例，都要对它绑定一次这个方法

方法二创建的实例，它的 printName 方法是在原型对象 __proto__ 上，
所有实例共享同一个 __proto__ , 所有只绑定了一次该方法

一般我们选择方法二，把通用的方法绑定在原型上，通过继承让每个实例拥有该方法，
这样能提高代码的重用性，节省内存，提高性能
*/

问题13： Object.create 有什么作用？兼容性如何？

作用：创建一个以该对象为原型的实例

var me = {
    name: "cg",
    sayName: function(){
        console.log("My name is " + this.name);
    }
}
var p = Object.create(me)
    //以 me 对象为原型，创建了实例 p
p.__proto__ === me //true

image.png

兼容性：IE 9及以上支持，具体见下表

|Feature|Chrome|Firefox(Gecko)|IE|Opera|Safari|
|---|---|
|Basic support|5|4.0(2)|9|11.60|5|

问题14： hasOwnProperty有什么作用？ 如何使用？

作用：判断一个属性是否是自身的属性,返回 true 或 false

var People = function(name){
    this.name = name
}

People.prototype.sayName = function(){
    console.log("My name is " + this.name);
}

var p = new People("cg")

console.dir(p)

p.hasOwnProperty("name")  //true
    //name 是 p 自己的属性，所以返回true
p.hasOwnProperty("sayName")  //false
    //sayName 是 p 的原型 __proto__ 里的属性，不是自己的属性，所以返回false

image.png

问题15：如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    this.age = age;
}

/*call 的作用是实现了继承，Male 继承了 Person 的方法
原理是：call 改变了函数 Person 的执行上下文为 Male 
*/

问题16： 补全代码，实现继承

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

Person.prototype.getName = function(){
    console.log(this.name);
};    

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

Male.prototype = Object.create(Person.prototype)  //实现继承

    //为了兼容 IE678 可以用以下三行代码实现继承，效果等同 Object.create
var Temp = function(){}
Temp.prototype = Person.prototype
Male.prototype = new Temp()

    //修改 constructor
Male.prototype.constructor = Male  
Male.prototype.getAge = function(){
    console.log(this.age);
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();  //若愚