this相关问题
1，apply、call 有什么作用，什么区别
相同之处：
call与apply的作用，都是调用一个函数，传入函数执行上下文及参数，第一个参数都是希望设置的this对象。不同之处：
不同之处在于call方法接收若干个参数的列表，而apply接收一个包含多个参数的参数数组
- Javascript的每个Function对象中有一个apply方法：
function.apply([thisObj[,argArray]])
还有一个类似功能的call方法：
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
它们各自的定义：
apply：应用某一对象的一个方法，用另一个对象替换当前对象。
call：调用一个对象的一个方法，以另一个对象替换当前对象。
它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
它们的不同之处：
- apply：
最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。 - call：
则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
更简单地说，apply和call功能一样，只是传入的参数列表形式不同：如 func.call(func1,var1,var2,var3) 对应的apply写法为：func.apply(func1,[var1,var2,var3])
也就是说：call调用的为单个，apply调用的参数为数组
function sum(a,b){
console.log(this === window);//true
console.log(a + b);
}
sum(1,2);
sum.call(null,1,2);
sum.apply(null,[1,2]);
作用
- 调用函数
var info = 'tom';
function foo(){
//this指向window
var info = 'jerry';
console.log(this.info); //tom
console.log(this===window) //true
}
foo();
foo.call();
foo.apply();
call和apply可以改变函数中this的指向
var obj = {
info:'spike'
}
foo.call(obj); //这里foo函数里面的this就指向了obj
foo.apply(obj);
- 借用别的对象的方法
eg:求数组中的最大值
var arr = [123,34,5,23,3434,23];
//方法一
var arr1 = arr.sort(function(a,b){
return b-a;
});
console.log(arr1[0]);
//方法二
var max = Math.max.apply(null,arr) //借用别的对象的方法
console.log(max);
fn.call(context, param1, param2...)
fn.apply(context, paramArray)
2，以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//输出结果：join：hi！
//此时，this是join对象；
3，下面代码输出什么，为什么
func()
function func() {
alert(this)
}
//输出结果：window;
//原因：func()等价于func.call(undefined);
//而undefined会被浏览器默认为全局对象window;
4，下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
//输出结果：#document; window;
//解释：
//在事件处理程序中this代表事件源DOM对象
//(setTimeout、setInterval这两个方法执行的函数this也是全局对象)
5，下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
//输出结果：join；
//解释：call（）中第一个参数表示定义的this值，即func（）中的this代表join。
6， 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
//this指的是$btn;
修改版：
var module= {
bind: function(){
var _this = this;
$btn.on('click', function(){
console.log(_this) //_this指的是module；
_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();
8， 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
- 解释：
p是由构造函数person生成的对象，在生成之后，就在p对象中添加了proto属性，这是一个对象。这个对象指向person中的protoType对象。而这里的对象protoType是由Object函数生成的，因此protoType.proto指向Object.protoType。
当调用p.toString( )时，现在p对象中找，发现没有，则到proto中寻找，即到person.protoType中寻找，发现仍然没有，则继续到person.protoType.proto中寻找，即p.proto.proto（也就是Object.protoType）。
- 原型链：
原型链：由于原型对象本身也是对象，而每个javascript对象都有一个原型对象，每个对象都有一个隐藏的proto属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。
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++){
var k = this[i];
if(obj[k]){
obj[k]++;
}else{
obj[k] = 1;
}
}
console.log(obj);
var num = 0;
var word = '';
for(var key in obj){
if(obj[key] > num){
num = obj[key];
word = key;
}
}
return '因为' + word + ' 出现了' + num + '次'
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
10， instanceOf有什么作用？内部逻辑是如何实现的？
- 作用：instanceOf可以判断一个对象是否是一个函数生成的。
function isInstanceOf(obj,fn){
var oldProto = obj.__proto__;
do{
if(oldProto === fn.prototype){
//prototype是小写的！
return true;
}else{
oldProto = oldProto.__proto__;
}
}while(oldProto){
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中，这个对象相当于公共空间。这样，在每次new一个新的对象时，不需要再次的生成方法printName而造成的内存浪费，需要时只需要到prototype中调用即可。
13， Object.create 有什么作用？兼容性如何？
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
};
function Male(name,age,sex){
this.age = age;
Person.call(this,name,sex);
//这句就可以继承Person中的属性，其中，this指的是new的m;
}
Male.prototype = Object.create(Person.prototype)
//这句话可以继承person中的方法
Male.prototype.printAge = function(){
console.log(this.age);
};
var m = new Male('har','23','男')
如果想通过继承方式得到另一个对象中的方法，需要新克隆一个另一个对象的prototype对象，并用它替代原来自身的prototype，这样，新的可以连接另一个对象的方法。具体看下图：
兼容性：
14， hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数
m.hasOwnProperty('name');
m.hasOwnProperty('age');
m.hasOwnProperty('sex');
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的作用是使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){
this.age = age;
Person.call(this,name,sex);
}
inherit(Person,Male);
Male.prototype.getAge = function(){
console.log(this.age)
};
Male.prototype.printName = function(){
console.log(this.name);
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
function inherit(superType,subType){
var _prototype = Object.create(superType.prototype);
_prototype.constructor = subType;
subType.prototype = _prototype;
}
