问题1： apply、call 、bind有什么作用，什么区别
- call apply，调用一个函数，传入函数执行上下文及参数
语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组
应用场景常常是这样的：fn.call(context, param1, param2...) fn.apply(context, paramArray)//借用别的对象的方法 var arr = [5, 10, 4, 0, 3]; var max = Math.max.apply(null, arr), Max = Math.max.call(null, 5, 10, 4, 0, 3); -
Function.prototype.bind()方法返回一个新函数，并将传入的第一个参数作为函数内部的this
语法：
fun.bind(thisArg[, arg1[, arg2[, ...]]])
典型例子：
强行绑定：this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 返回 81 var retrieveX = module.getX; retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域 // 创建一个新函数，将"this"绑定到module对象 // 容易被全局的x变量和module里的属性x所迷惑 var boundGetX = retrieveX.bind(module); boundGetX(); // 返回 81
var fn1 = obj.fn.bind(obj1) //this从obj变为obj1
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
题目2输出
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
题目3输出
原因：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，call的第一个参数把被调用函数func()的
执行上下文改为john
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指$btn
this.showMsg();//此处的this即执行上下文是$btn，它没有对应的方法
showMsg()
})
},
showMsg: function(){
console.log('饥人谷');
}
}
修改：
$btn = $('.click');
var module= {
bind: function(){
console.log(this);
var that = this;
$btn.on('click', function(){
console.log(this);
that.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
};
module.bind();
原型链相关问题
问题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.__proto__ === Person.prototype
②Person.prototype.constructor === Person
①,②===p.__proto__.constructor === Person
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
toString是原型链上从object继承过来的方法
原型链是针对构造函数的，比如我们先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，当我访问new出来的这个函数的某个属性，在这个new出来的函数中没有定义这个变量，那么它就会往上（向创建出它的函数中）查找。如果找不到，还会重复上述查找过程往其父函数中查找。这个查找的过程就叫做原型链。
image.png
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
String.prototype.getMostOften =function(){
var obj = {};
var mostStr = {
str: '',
count: 0
};
for(var i = 0;i < this.length; i++){
if(obj[this[i]]){
obj[this[i]]++
}
else{
obj[this[i]] = 1
}
if(obj[this[i]] > mostStr.count){
mostStr.str = this[i];
mostStr.count = obj[this[i]]
}
}
return 'The most frequent letter is "' + mostStr.str + '",which has appeared ' + mostStr.count + ' times.';
};
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);//The most frequent letter is "d",which has appeared 5 times.
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
-
instanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上
简单来说，就是判断一个对象是否为另一个对象的实例
一个mdn例子：
// 定义构造函数 function C(){} function D(){} var o = new C(); o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype o instanceof D; // false，因为 D.prototype不在o的原型链上 o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true C.prototype instanceof Object // true,同上 C.prototype = {}; var o2 = new C(); o2 instanceof C; // true o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上. D.prototype = new C(); // 继承 var o3 = new D(); o3 instanceof D; // true o3 instanceof C; // true
继承相关问题
问题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函数中，而方法二是添加在对应函数的prototype对象上。调用方法一时，每个实例化对象中都有他们自己的方法（和方法一相同的作用），而调用方法二时，不同的People对象都指向同一个方法，相比方法一达到了节省空间的效果。
问题13： Object.create 有什么作用？兼容性如何？
- 作用：
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
Male.prototype.printAge = function(){
console.log(this.age);
};
在类似上述情况中，由于引用关系，导致后续修改子类的prototype也修改了父类的prototype，因为修改的是一个值。
但是如果通过Object.createclone了一个新的prototype而不是直接把Person.prtotype直接赋值，把子类的prototype改为父类的prototype的备份，就可以避免以上情况。
- 兼容性：
问题14： hasOwnProperty有什么作用？ 如何使用？
作用：
hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。
使用：
m.hasOwnProperty('name'); // 输出true，判断name是否是实例化对象m自身的属性。
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true
问题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的执行上下文改为Male的执行上下文，即将Male中的name和sex值用于Person
问题16： 补全代码，实现继承
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log(this.name);
};
function Male(name, sex, age){
People.call(this, name, sex);
this.age = age;
}
Male.prototype = Object.create(People.prototype);
Male.prototype.consructor = Male;
Male.prototype.getAge = function(){
cosole.log(this.age);
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
