this_原型链_继承

this 相关问题

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

bind:创建一个新函数，当这个函数被调用的时候，第一个参数作为this值，之后的参数作为实参传入到新函数中。

call:调用函数，并指定这个函数的this和传入的若干个参数值。

apply:指定this值和以数组形式传递参数的情况下调用函数。

作用: 从它们的用法中可以看出，改变this，传递参数。

区别:首先是call和bind的区别，call是调用函数，返回的是函数的返回值，而bind是创建一个新函数，就像是复制了别人的躯壳，改变了内在，然后作为一个新东西使用。然后call和apply的区别是，传递的实参不一样，call是单个传递，而apply是以数组的形式传递。

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

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

`john.sayHi = func`为john对象添加了一个新方法`sayHi :function(){  alert(this.firstName + ": hi!") }`
john = {
             firstName: "John" 
            sayHi :function(){  alert(this.firstName + ": hi!") }
        }
`john.sayHi()`输出：弹出一个对话框，内容为John:hi!

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

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

输出[object Window]
因为：函数func所在的作用域为全局作用域，因此函数中的this指向window

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

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

输出：#document
Window

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

输出：John，因为调用func.call(john)时，函数func中的this发生了改变，指向了对象john，因此输出this.firstName时，指的是对象john中的firstName

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

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

在调用this.showMsg()时，this指的是$btn，而$btn中没有showMsg方法，在调用module.bind()时，点击$btn会报错this.showMsg is not a function，
应该修改为：

var module= {
  bind: function(){
    var _this = this;//声明一个变量，将this保存在变量中
    $btn.on('click', function(){
      console.log(this) //this指的是$btn
      _this.showMsg();//_this指向对象module
    })
  },
  
  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();

p为Person的实例，拥有Person的name属性和原型链上的属性和方法
p.__proto__指向Person.prototype
Person.prototype.constructor指向Person

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

toString是从Object.prototype中找到的。当调用p.toString()时，p会检查自身是否有这个函数，如果有则直接调用，如果没有，则从p.proto中查找，如果还没有找到，则从原型对象.proto中寻找。

原型链1.png

原型链：
其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都有一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

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

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

    String.prototype.getMostOften = function(){
        var obj = {};
        for(var i=0;i<this.length;i++){
            if(!obj[this[i]]){
                obj[this[i]] = 1;
            }else{
                obj[this[i]]++
            }
        }
        var count = 0;
        var maxValue;
        for (var key in obj) {
            if (obj[key] > count) {
                count = obj[key];
                maxValue = key
            }
        }
        return maxValue+",因为"+maxValue+"出现了"+count+"次";
    };
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);

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

obj instanceof func
判断一个对象是否为给定引用类型的实例。内部逻辑是判断该对象的原型链上是否存在func.prototype。

function isinstanceof(obj,func){
        var oldObj=obj.__proto__;
        do{
            if(oldObj === func.prototype){
                return true;
            }else{
                oldObj=oldObj.__proto__;
            }
        }
        while(oldObj);
        return false;
    }

继承相关问题

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

方法1中每创建一个People实例都会创建一个printName方法。而方法2中所有实例共享printName方法，从而节省资源。

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

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

objA=Object.create(objB.prototype)

会使得objA.proto = objB.prototype

function Parent(name,age){
  this.name=name;
  this.age=age;
}
Parent.prototype.say=function(){console.log("my name is "+this.name)}
function Child(name,age,sex){
  Parent.call(this,name,age); //继承属性
  this.sex=sex;
}
Child.prototype=Object.create(Parent.prototype)   //这里重写了Child的原型，并指定了Child.prototype的__proto__指向Parent.prototype
Child.prototype.walking=function(){console.log(this.sex)}
Child.prototype.constructor=Child;  //手动指定构造函数
var c=new Child("Clark",24,"男")

兼容性：支持ie9以上(包括ie9)，其他主流浏览器

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

hasOwnProperty判定一个属性是不是属于这个对象本身,返回布尔值
该属性为对象本身的属性，返回true；该属性为对象原型上的属性，则返回false

function Person(name,age){
    this.name = name;
    this.age = age;
  }
Person.prototype.sayName = function(){
    console.log("my name is "+this.name)
  }
var p = new Person("clark",28)
p.hasOwnProperty('name')  //true
p.hasOwnProperty('age')  //true
p.hasOwnProperty('sayName')  //false

问题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函数，使得该函数的this值指向Male的实例，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.getAge = function(){
    console.log(this.age)
};
Male.prototype.constructor = Male;
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();//若愚
ruoyu.getAge();//27
console.log(ruoyu.sex);//男

最后编辑于：2017.12.06 05:45:00

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