JS面向对象编程(3)：原型链与继承

1.以下代码输出什么？

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//John:hi!

输出John:hi!。解析：john.sayHi()可理解为john.sayHi.call(john)，即this指向john，输出即为John.firstName + ":hi!"。

2.以下代码输出什么？

func() 
function func() { 
  alert(this)
}

输出window对象。func()相当于func.call(undefined)，故输出window对象。若要改变this指向，则应写成：func.call(obj)

3.下面代码输出什么？

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);

单击页面，依次输出document对象、window对象。
DOM对象绑定事件时，传入的函数中的this绑定到该DOM对象
setTImeout 和 setInterval 这两个方法执行的函数中的this绑定到全局对象window。

4.以下代码有什么问题，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指$btn
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

在事件监听函数中 this.showMsg()， this指代 $btn 这个jQuery对象，并不代表module对象，因此 this.showMsg() 相当于 $btn.showMsg()。
想要在事件监听函数中 调用module 的方法，可以人为把this绑定到module对象，使用 bind() 即可:

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)   //this指向module   
      this.showMsg();
    }.bind(this))
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

也可以将module的this保存起来为that，最后用that.showMsg()去执行。
也可以用ES6的箭头函数。

5.有如下代码，解释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("Li")
p.sayName();
  • 首先，Person是一个构造函数，而p是它的一个实例。
  • 故，p.__proto__ == Person.prototype。
  • prototype对象有一个constructor属性，指向prototype对象所在的构造函数。故Person.prototype.constructor指向Person，p.__proto__.constructor也指向Person。

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

原型图

如图所示，p自身没有toString，就到Person类的prototype去找，也没有，prototype是个对象，由Object类创建，但是仍然没有toString，所以继续到prototype的_ proto _ 也就是Object的prototype中去找，最终找到了toString方法。
由此引出原型链的概念：
每个对象都有一个proto属性，其指向该对象的原型对象，而原型对象也是对象，所以也有一个proto指向原型对象的原型对象，这样就组成了一条链，称为原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值。
原型链是实现继承的主要方法。

7.对String做扩展，实现如下方式获取字符串中频率最高的字符

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

代码如下：

String.prototype.getMostOften = function(){
  var obj = {};
  var max = 0;
  var result;
  for(var i=0; i<this.length; i++){
    if(obj[str[i]]){
      obj[str[i]] += 1;
    } else {
      obj[str[i]] = 1;
      }
 }
  for(var key in obj){
     if(obj[key]>max){
        max = obj[key];
        result = key;
     } 
  }
  
  return result;
};

8.instanceOf有什么作用？内部逻辑是如何实现的？

instanceOf运算符可以判断一个对象是否是某个类的实例。
如果一个对象通过沿着 _ proto _ 组成的原形链一层层查找其constructor属性，如果有一层proto等于某类的prototype，则该对象是某类型的实例。

function instance(obj,fun){
  if(obj.__proto__){
    if(obj.__proto__ === fun.prototype){
      return true;
    } else {
         return instance(obj.__proto__,fun);
      }
  }
  return false;
}

console.log(instance([],Array));  //true
console.log(instance([],Object));  //true
console.log(instance([],String));   //false

9.继承有什么用？

继承是指一个对象直接使用另一对象的属性和方法。
继承机制使得不同的实例可以共享构造函数的原型对象的属性和方法，提高了代码的复用性。

10. 下面两种写法有什么区别?

//方法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方法，前者直接将方法写在构造函数上，而后者将方法写在构造函数的prototype对象上，前者在每生成一个实例之后实例的printName就占用内存，而后者每生成一个实例后会共享构造函数prototype对象上的printName方法，以达到节省内存的效果，也便于后期维护。

11.Object.create 有什么作用？兼容性如何？

  • 该方法接受一个对象作为参数，然后以它为原型，返回一个实例对象。该实例完全继承原型对象的属性。还可传入第二个参数，该参数是一个属性描述对象，它所描述的对象属性，会添加到实例对象，作为该对象自身的属性。
  • Object.create是ES5中的方法，各大浏览器的最新版本（包括IE9）都部署了这个方法。如果老式浏览器不支持Object.create方法，可以就用这段代码自己部署。
if(typeof Object.create !== 'function'){
   Object.create = function(obj){
      function F(){}
      F.prototype = obj;
     return new F();
   };
}

以上代码说明，Object.create方法的实质是新建一个构造函数F，使其prototype属性指向参数对象obj，最后返回一个F的实例,从而让该实例继承obj对象的属性。

12.hasOwnProperty有什么作用？ 如何使用？

hasOwnProperty方法用于返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。

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

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('Li', 23)
p1.hasOwnProperty('name')  //true
p1.hasOwnProperty('printName')  //false

13.如下代码中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的作用是，指定Person函数执行上下文中的this为当前的Male创建的新对象。这样通过Male构造出的对象，便能继承拥有Person中的属性，也就是name 和sex。

14.补全代码，实现继承

function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var li = new Male('Li', '男', 24);
li.printName();

代码如下：

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

function Male(name,age,sex){
  this.sex = sex;
  Person.call(this,name,age);
}
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.printSex = function(){
  console.log(this.sex);
};

var a = new Male('Li',24,'male');
a.printName();  //Li

也可封装成一个函数使用：

function inherit(superType,subType){
  var _superType = Object.create(superType.prototype);
  _superType.constructor = superType;
  subType.prototype = _superType;
}

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

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

inherit(Person,Male);

Male.prototype.printSex = function(){
  console.log(this.sex);
};
var a = new Male('Li',24,'male');
a.printName();  //Li
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容