问题1： apply、call 有什么作用，什么区别
- 1.function.prototype.call()
函数实例的call方法可以指定函数内部this的指向，即函数执行时所在的作用域
var obj = {};
var fn = function(){
return this
}
fn() === this // true
fn.call(obj) === obj // true
fn()执行时所在的作用域是全局环境，所以this是window，而fn.call(obj)则是在对象obj环境下执行的，所以此时的this指向obj。
fn.call(null) === this
fn.call(undefined) === this
fn.call === this
call方法内部的参数如果为空、null和undefined，则默认传入全局对象。
var obj = {};
var add = function(x,y){
return x+y
}
add.call(obj,2,3)
call方法还可以接受多个参数。call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。
2.function.prototype.apply()
apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数。
function fn(x,y){
return x+y
}
fn.call(null,1,1)//2
fn.apply(null,[1,1])//2
fn函数本来接受两个参数，使用apply方法以后，就变成可以接受一个数组作为参数。
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
```
弹出 Johb:hi!
#### 问题3： 下面代码输出什么，为什么
```
func()
function func() {
alert(this)
}
```
[object Window]
因为该函数的执行环境是全局环境window
#### 问题4：下面代码输出什么
```
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
```
document 点击文档时执行回调函数，此时回调函数的执行环境是文档对象
window对象 点击文档后过0.2秒后，此时回调函数的执行环境已经变为全局环境
#### 问题5：下面代码输出什么，why
```
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
```
func强行借用john作为this，执行func(),所以弹出结果为john。
#### 问题6： 以下代码有什么问题，如何修改
```
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指向$btn
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
//修改后：
var module= {
bind: function(){
var _this = this; //将this代表的module存到_this
$btn.on('click', function(){
console.log(this) //$btn
_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是构造函数，相当于java里面的“类”的概念，
构造函数内部定义实例的属性和方法，
这些属性和方法是属于该类的所有实例的特征；
* p是由构造函数Person构造出来的实例；
* prototype是构造函数内部的原型对象，
该对象内部的属性和方法能够被实例所继承，
并且通常放置所有实例共享的属性和方法；
* constructor是定义在构造函数原型对象prototype上的属性，
该属性被赋值该构造函数的函数名；
* `__proto__`为实例对象的属性，其指向构造函数的原型对象prototype；
#### 问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
* `p.toString()`方法是继承构造函数Object的原型对象里定义的toString方法，首先p会找自己的toString方法，如果没有找到，会沿着 `__proto__`属性继续到构造函数Person的prototype里找toString方法，如果还未找到，再继续往`Person.prototype`的`__proto__`即Object.prototype找toString方法，最后找到toString()方法。
* 原型链：由于原型对象本身也是对象，而每个javascript对象都有一个原型对象，每个对象都有一个隐藏的`__proto__`属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。
#### 问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
```
String.prototype.getMostOften = function(){
var obj = {};
for(var i=0,k;i<this.length;i++){
k = this[i];
if(obj[k]){
obj[k]++
}else{
obj[k] = 1
}
}
var max = 0,key;
for(var k in obj){
if(obj[k]>max){
max = obj[k];
key = k;
}
}
return key;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d
```
#### 问题10： instanceOf有什么作用？内部逻辑是如何实现的？
instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型；
例如：
```
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true
```
内部逻辑是查看该对象的`__proto__`属性所指向的原型中的constructor是否指向该构造函数，如果是则返回true，如果不是，则查看原型的__proto__所指向的原型中的constructor是否指向该构造函数，如果是则返回true，如果不是则继续。依次递进，直到达到原生对象Object的原型，如果依然不符合，则返回false;
```
function instanceOf(obj,fn){
var oldpro = obj.__proto__;
while(oldpro){
if(oldpro === fn.prototype){
return true;
}else{
oldpro = oldpro.__proto__;
}
}
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);
```
同样是printName方法，一个直接部署在构造函数内部的实例对象上，
另一个部署在构造函数的prototype对象上，
前者在每生成一个实例之后实例的printName就新占用内存，
而后者每生成一个实例后会共享构造函数prototype对象上的printName方法，以达到节省内存的效果；
#### 问题13： Object.create 有什么作用？兼容性如何？
Object.create()是ES5提出的一个新的方法，它可以传入一个对象作为该方法返回的对象的原型对象；
目前，各大浏览器的最新版本（包括IE9）都部署了这个方法。如果遇到老式浏览器，可以用下面的代码自行部署：
```
if(!Object.create){
Object.create = function(obj){
function F(){};
F.prototype = obj;
return new F();
}
}
```
#### 问题14： hasOwnProperty有什么作用？ 如何使用？
对象实例的hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。
```
var o = {
name:'teren'
}
o.hasOwnProperty('name')//true
o.hasOwnProperty('toString')//false
Object.getPrototypeOf(o).hasOwnProperty('toString')//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;
}
```
作用：在Male函数中，借用Person函数的属性，使Male函数能够执行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){
Person.call(this,name,sex); //借用Person的属性
this.age = age;
}
Male.prototype = Object.create(Person.prototype); //create一个新的Male.prototype对象
Male.prototype.constructor = Male;
Male.prototype.getAge = function(){
console.log(this.age);
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();//若愚
```
网友评论