关于this
1- apply、call 、bind的作用和区别
- apply、call 、bind都有改变this值的作用，
apply和call的用法区别就在于第二个参数，apply接受的第二个参数是数组，而call第二个参数接受的是不定参。
bind的参数和call一样，但是bind是返回一个新的函数，并不是立即调用，可以在任何时候去调用。(bind能够绑定参数的情况下，再给已经被bind过的结果函数传参数，参数没有作用,在使用bind的时候传进去的参数才有效，后面使用该返回的函数时，只是调用。但是后面传入的参数会在Arguments里体现。但是如果在绑定当时没有传入参数，而是在调用的时候再传参数，此时的参数是有作用的。)看例子：
function a(xx, yy) {
console.log(xx, yy);
console.log(this);
console.log(arguments);
}
var thisObj = {name:'haha'};
a.apply(null, [5, 55]); //第一个参数不设置，不改变原this指向
a.call(thisObj, 5, 55); //设置第一个参数，该方法里的this改变成thisObj
var b = a.bind(null, 5, 55); //返回一个新函数
b();
这些方法主要的作用是在一些本身不具备某些方法时，可以借用其他对象的方法来完成。例如：
var nodes = document.getElementsByClass('item'); //得到一个类数组对象
//我想获取数值最大的那个对象
Arrary.prototype.max.apply(null, nodes); //借用Arrary的方法，将我需要的结果算出来
2- 以下代码输出什么
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
- 输出: John: hi!
- 原因:将函数func赋值给sayHi,sayHi也就是一个函数了，执行此函数，这里面的this就是john这个对象
3- 下面代码输出什么，及原因
func()
function func() {
alert(this)
}
- 输出: Object window
- 原因:因为函数声明会前置，所以在声明前调用也是可以的，因为是在全局环境下调用，相当于window.func()，所以this的值是window。
4- 下面代码输出结果
document.addEventListener('click', function(e){
console.log(this); //document ,执行click方法的是document
setTimeout(function(){
console.log(this); //Window setTimeout方法的调用者是Window
}, 200);
}, false);
- 输出:
document
window - 原因:事件处理函数中的this指的是其对应的dom对象,setTimeout中的this指的是window
5- 下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
- 输出: John
- 原因: func.call()中传入了对象john,因此将func中this的值设置为了对象john
6- 下面代码有什么问题，怎么来修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
- 问题:事件处理函数中的this指的是该事件处理函数绑定的对象,即$btn,因此该对象没有showMsg()方法
- 修改:在bind内部设置一个变量将this保存下来,这样在事件处理函数中使用该变量来调用showMsg方法
var module= {
bind: function(){
var _this = this;
$btn.on('click', function(){
console.log(this) //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构造函数创建之后有一个prototype属性是一个对象，这个prototype对象上有一个constructor属性是指向Person构造函数的。当实例化一个p时，首先创建了一个空对象，并把这个对象的proto属性指向Person.prototype,然后将实例对象传入构造函数执行函数，最后返回实例对象。当实例p.sayName()时，先在自己的属性中找，如果没有找到就在proto指向的原型上找，如果找到了就执行，没有找到就继续向上找，直到最顶层的null。
8- 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
- 原型链: 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.如果让原型对象等于另一个类型的实例,则原型对象将包含一个指向另一个原型的指针,相应的另一个原型也包含着一个指向另一个构造函数的指针.如此层层递进,就构成了实例与原型的链条,即原型链
9- 对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
结果：
var str = 'ahbbccdeddddfg';
String.prototype.getMostOften = function(){
var maxKey;
var countArr = this.split("");
var countObj = {};
var i = 0;
//计算每个字符出现的次数
for(i; i < countArr.length; i++){
if(countObj[countArr[i]]){
countObj[countArr[i]] += 1;
}
else{
countObj[countArr[i]] = 1;
}
}
console.log(countObj);
var sortNum = 0;
for(var key in countObj){
if(countObj[key] > sortNum){
sortNum = countObj[key];
maxKey = key;
}
}
return maxKey;
};
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
10- instanceOf的作用 ，内部逻辑是如何实现的
- 使用 object instanceof constructor
- 作用:检测 constructor.prototype 是否存在于参数 object 的原型链上
- 内部实现逻辑：每个实例都包含一个指向原型对象的内部指针(proto),通过该指针可以找到其原型链上的所有内容,因此可以检测 constructor.prototype 是否存在于参数 object 的原型链上.如：
function _instanceof(A, B) {
var O = B.prototype;// 取B的prototype
A = A.__proto__;// 取A的__proto__
while (true) {
//Object.prototype.__proto__ === null
if (A === null)
return false;
if (O === A)// 当 O 严格等于 A 时，返回 true
return true;
A = A.__proto__;
}
继承相关
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:将printName方法放在了构造函数中,但是由于使用了匿名函数,因此每个实例的printName方法都是不同的(尽管功能相同,但每个实例的printName方法都会占用内存空间),并没有实现代码的复用
- 方法2:将printName方法放在了Person的原型对象中,当Person的实例调用printName方法时,会沿着原型链,找到Person的原型对象,使用Person的原型对象中的printName方法,因此,尽管每个Person实例都可以调用printName方法,但是这些printName方法都指的是Person的原型对象中的printName方法.实现了代码的复用
13- Object.create 的作用，及兼容性
- Object.creat()是创建一个拥有指定原型和若干个指定属性的对象。
语法：Object.create(proto,[propertiesObject])
//创建一个空对象
var o = {};
var o = Object.create(Object.prototype);
//创建一个带有属性的对象
var o = Object.create(Object.prototype,{ p:{value:88 } } );
var o = {
p:88
}
//创建一个实例
function Person(){
}
var o = new Person();
var o = Object.create(Person.prototype);
-
Object.Create()兼容性：
14- hasOwnProperty的作用，及如何使用
- hasOwnProperty这个方法可以用来检测一个对象是否含有特定的自身属性(和方法),该方法会忽略掉那些从原型链上继承到的属性(和方法)。
- 使用: obj.hasOwnProperty(prop),prop指要检测的属性,可以是字符串或者Symbol,返回一个true或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;
}
- call的作用是执行Person，并且将调用这个函数实例对象作为this传入，这样实例对象上就会有name和sex属性
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(){
return this.name;
};
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
Male.prototype = Object.create(Person.prototype); //继承Person的原型
/**
** 自定义方法写在继承之后
**/
Male.prototype.getAge = function(){
console.log(this.age);
return this.age;
};
Male.prototype.printName = function(){
console.log(this.getName());
return this.getName();
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
