一、this 相关问题
问题1： apply、call 、bind有什么作用，什么区别
- 作用：都是用来改变函数的this对象的指向的。
- 区别
先看一个例子
本身没什么好说的，显示的肯定是小王，男，今年24。那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样：xw.say.call(xh);
对于apply可以这样：xw.say.apply(xh);
而对于bind来说需要这样：xw.say.bind(xh)();
如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。那么call和apply有什么区别呢？我们把例子稍微改写一下。
可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。
对于call来说是这样的xw.say.call(xh,"实验小学","六年级");
而对于apply来说是这样的xw.say.apply(xh,["实验小学","六年级"]);
看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
那么bind怎么传参呢？它可以像call那样传参。
xw.say.bind(xh,"实验小学","六年级")();
但是由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。
xw.say.bind(xh)("实验小学","六年级");
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出：John: hi!
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
输出：window。
因为未指定this，this值为underfined，浏览器里有一条规则：如果你传的 context 为null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）。
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
点击后，输出：
document
window
因为setTimeout中的this指向全局对象window
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
输出：John。通过call方法调用的函数改变了其this的指向，指向变量john，而变量john的firstName为John"，所以输出John。
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('前端');
}
}
//例中的this指向$btn，事件中的this指向发生事件的目标事件
//因此this.showMsg()不存在，会报错
//修改后
var module= {
bind: function(){
let _this = this //保存最初的this
$btn.on('click', function(){
console.log(_this)
_this.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是一个构造函数，p是通过new Person建造的Person的实例。
每一个构造函数都会有一个prototype，是这个函数的原型对象。
prototype中默认都会有一个constructor属性，指向这一个构造函数。
在本例中，Person的prototype有constructor，指向Person，还有一个sayName方法。
p是Person通过new创建的实例，其中有一个proto这么个属性，这个属性指向了构造函数的prototype，本例中指向了Person的prototype。
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
toString来自object.prototype
每个对象有都有属性prototype
对象都有属性proto , 对象的proto指向创建他的对象的prototype，对象的prototype的proto又指向创建对象的prototype的对象的prototype，循环下去，直到Object对象为止，因为Object.proto = null
而这条链就是原型链
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
//方法一：
String.prototype.getMostOften = function() {
var Str = [];
var num = [];
var include = false;
for(var i = 0; i < this.length; i++){
if(i === 0){
Str.push(this[i]);
num.push(0);
}
for(var key in Str){
if(Str[key] === this[i]){
num[key]++;
include = true;
}
}
if(!include){
Str.push(this[i]);
num.push(1);
}
include = false;
}
var index = num.indexOf(Math.max.apply(Math, num));
return Str[index];
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
//方法二：
String.prototype.getMostOften = function() {
var Str = {};
var key ;
for(var i = 0; i < this.length; i++){
key = this[i];
if(!Str[key]){
Str[key] = 1;
}
else{
Str[key] ++;
}
}
var max = 0;
var strKey;
for(var k in Str){
if(Str[k] > max){
max = Str[k];
strKey = k;
}
}
return strKey;return "出现最多的字母:" + num + "\n" + "出现次数:" + max;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
作用：判断对象在其原型链中是否存在一个构造函数的prototype属性。
function _instanceof(obj,func){
if(obj.__proto__ === func.prototype){//先判断该对象的直接原型
对象是否等于构造函数的prototype属性，如果是，返回true
return true
}else {//如果不是，把obj的原型链上升一层，继续判断它的原型
对象的原型对象是否等于某个构造函数的prototype属性，进行一个递归的判断
return _instanceof(obj.__proto__,func)
}
}
三、继承相关问题
问题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);
方法2将方法写在原型链上，起到了公共代码的作用，节约了代码量，提高了性能。
问题13： Object.create 有什么作用？兼容性如何？
作用：Object.create(proto[, propertiesObject ])创建一个具有指定原型且可选择性地包含指定属性的对象。。
- proto：必需。 要用作原型的对象。 可以为 null。
- propertiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。
问题14： hasOwnProperty有什么作用？ 如何使用？
- 作用：
hasOwnProperty是Object.prototype的一个方法，判断一个对象是否包含自定义属性和方法，而不是原型链上的属性和方法。 - 使用：
m.hasOwnProperty('name');
m.hasOwnProperty('printName');
Male.prototype.hasOwnProperty('printAge');
问题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调用Person方法，指定Person方法中的this为Male，并传入参数sex，age
问题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);
};
var ruoyu = new Male('前端', '男', 27);
ruoyu.getName();
ruoyu.getAge();
