this_原型链_继承

2017-02-08 本文已影响90人 ahong_吴

原型链相关问题
问题7：有如下代码，解释Person、 prototype、proto、p、constructor之间的关联。

function Person(name){ 
  this.name = name;
}
Person.prototype.sayName = function(){ 
  console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();

person是构造函数；
prototype是构造函数的原型对象；
p是构造函数的实例；
__proto__是p的原型链，指向person的prototype；
constructor即构造函数person本身。

问题8：上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

原型链 (4).png

toString是哪里来的?
p首先会找自己的toString方法，如果未找到就会通过__proto__到pcrson的prototype上寻找，如果未找到，就会继续通过prototype的__proto__到object.prototype上寻找，结果会找到toString方法。
解释什么是原型链
JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候，如果对象本身没有找到这个属性，就会沿着原型链一层一层的寻找。

问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符

String.prototype.getMostOften = function (){
  var obj = {};
  for(var i=0;i<this.length;i++){
    var k = this[i];
    if(!obj[k]){
      obj[k] = 1;第一次出现 次数记为1
    }else{
      obj[k]++;// 如果存在次数再加1
    }
  }
  console.log(obj);
//遍历对象，找到出现次数最多的
  var max = 0,val;
  for(var key in obj){
    if(obj[key] > max){

      max = obj[key];
      val = key;
    }
  }
  return ('因为'+val+'出现了'+max+'次');
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

Paste_Image.png

问题10： instanceOf有什么作用？内部逻辑是如何实现的？

instanceOf：判断一个对象是否为另一个对象的实例。继承中判断实例是否属于它的父类

Paste_Image.png

继承相关问题
问题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);

方法一是在People函数内部创建printName方法，当再创建一个People时，printName方法又会被创建一次，所以比较消耗内存。

方法二的printName方法是放在Person的原型上，当需要使用的时候调用就可以了，不需要重复创建printName方法。

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

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。

function Person(name){
   this.name = name;
}
Person.prototype.sayName = function(){
     console.log('My name is :' + this.name);
}
function People(name){
  this.name = name;
}
People.prototype = Object.create(Person.prototype);
People.prototype.constructor = People;
var p = new People('若愚');
p.sayName();

Paste_Image.png

通过Object.create()方法，让People.prototype指向Person.prototype继承它的printName方法。
对People.prototype进行修改不会影响到原来Person.prototype的printName方法。
兼容性：

浏览器兼容.png

问题14： hasOwnProperty有什么作用？如何使用？
hasOwnProperty() 方法会返回一个布尔值，其用来判断某个对象是否含有指定的属性，该方法会忽略掉那些从原型链上继承到的属性。

Paste_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;
}

在Male下执行Person环境，Male继承了Person的功能。

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

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

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

function Male(name, sex, age){
    Person.call(this,name,sex);
    this.age = age;
}
Male.prototype = Object.create(Person.prototype); //ES5的方法
Male.prototype.constructor = Male;

Male.prototype.getAge = function(){
    console.log(this.name);
};

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

方法二：

function fn () {}
fn.prototype = Person.prototype
Male.prototype = new fn()

this_原型链_继承

猜你喜欢

热点阅读