JS_this_原型链_继承

this 相关问题

问题1： apply、call 、bind有什么作用，什么区别

1. call()

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user);  //小学生
    }
}
var b = a.fn;
b.call(a);

通过在call方法，可以改变函数的执行上下文，简单的说就是改变this值的指向对象

call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    user:"小学生",
    fn:function(a, b){
        console.log(this.user); //小学生
        console.log(a+b); //3
    }
}
var b = a.fn;
b.call(a,1,2);

2. apply()

apply方法和call方法有些相似，它也可以改变this的指向

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user); //小学生
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
    user:"小学生",
    fn:function(a, b){
        console.log(this.user); //小学生
        console.log(a+b); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

或者

var a = {
    user:"小学生",
    fn:function(a, b){
        console.log(this.user); //小学生
        console.log(a+b); //11
    }
}
var b = a.fn;
var arr = [1,10]
b.apply(a, arr);

//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {
    user:"小学生",
    fn:function(){
        console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.fn;
b.apply(null);

3. bind()

bind方法和call、apply方法有些不同，但是不管怎么说它们都可以用来改变this的指向。

先来说说它们的不同吧。

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);

我们发现代码没有被打印，对，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

那么我们现在执行一下函数c看看，能不能打印出对象a里面的user

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user); //小学生
    }
}
var b = a.fn;
var c = b.bind(a);
c();

ok，同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
    user:"小学生",
    fn:function(e,d,f){
        console.log(this.user); //小学生
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。

问题2：以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//出现弹窗显示 john: hi!
this指向调用sayHi()的john对象

问题3：下面代码输出什么，为什么

func() 
function func() { 
  alert(this)
}
// 弹窗显示[object Window] 
因为在func函数里这个this 指向全局对象 window

问题4：下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);            //输出document, 在事件处理程序中this代表事件源DOM对象
    setTimeout(function(){
        console.log(this);       //输出window, setTimeout和setInterval执行的函数this是全局对象
    }, 200);
}, false);

问题5：下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
// 弹窗显示 John
call 方法改变了 this的指向，使this指向对象john

问题6：以下代码有什么问题，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //这里的this指$btn
      this.showMsg();  //$btn上没有showMsg()这个方法
    })
  },

  showMsg: function(){
    console.log('饥人谷');
  }
}

修改后：
var module= {
  bind: function(){
     var that = this                  // 缓存指向modeule对象的this
    $btn.on('click', function(){
      console.log(this) //这里的this指$btn
      that.showMsg();  //that指向modeule ，modeule上有showMsg这个方法
    })
  },

  showMsg: function(){
    console.log('饥人谷');
  }
}

原型链相关问题

问题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是Person 的实例，每个实例都有一个内部属性 __proto__， __proto__指向构造这个实例的对象的 prototype属性。
prototype是构造函数内部的原型对象，所以拥有 contructor和 __proto__属性。constructor指向了构造函数Person。

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

当调用 p.tostring() 时, 先会在 p 里找 tostring 方法, 找不到会沿着 __proto__ 到 Person.prototype 中找,还找不到就接着沿着 __proto__ 找, 直到在 object.prototype 中找到为止
p.__proto__ ==> Person.prototype.__proto__ ==> object.prototype

原型链：
p.toString()方法，先从p的属性里面找，没有，
再从p.proto中找，还是没有
再从p.proto.proto中找，找到了，
这样沿着proto这个链子一路找下去，就是原型链

image.png

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

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

代码如下：

String.prototype.getMostOften = function() {
    var obj = {}, char;
    for(var i=0; i<this.length; i++) {
        char = this[i];
        if(obj[char]) {
            obj[char]++;
        }else {
            obj[char] = 1; 
        }
    }
    var maxchar = "", max = 0;
    for ( var key in obj) {
        if(obj[key] > max) {
            max = obj[key];                  // 始终保持最大值
            maxchar = key;
        }
    }
    return maxchar;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

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

概述

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

语法

obj instanceof Object;//true 实例obj在不在Object构造函数中

举个例子:

模拟 A instanceof B

function _instanceof(A, B) {
    var O = B.prototype;// 取B的显示原型
    A = A.__proto__;// 取A的隐式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 这里重点：当 O 严格等于 A 时，返回 true
            return true;
        A = A.__proto__;
    }
}

继承相关问题

问题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** 方法。
区别是方法一是在** Person** 的实例对象里创建 ** printName** 方法，这样每创建一个新的实例都会有一个新的 ** printName** 方法。
方法二是在** Person ** 的原型链上创建 ** printName** 方法，这样每一个实例只需要调用原型链上的方法，比较节约内存。

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

Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

child = Object.create(parent.prototype)
不使用Object.create的方法
function fn(){}
chlid.prototype = new fn();
fn.prototype = parent.prototype;

image.png

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

hasOwnPerperty 是 Object.prototype 的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性
hasOwnProperty 是 **JavaScript ** 中唯一一个处理属性但是不查找原型链的函数

obj.hasOwnProperty(prop)
//prop : 要检查的属性名
//obj: 要检查的对象
//返回一个布尔值

问题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;
}

Person.call(this, name, sex); 使函数Person 的 this 指向 Male ，然后执行函数使 Male 能够继承 Person 的属性

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

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

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

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

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

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

补全后

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

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

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

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

最后编辑于：2017.12.07 06:17:19

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