this 相关问题
- 问题1： apply、call 、bind有什么作用，什么区别
作用：
给fun函数指定this和参数apply的语法：
fun.apply(thisArg[, argsArray])call的语法：
fun.apply(thisArg[, arg1[, arg2[, ...])bind:
fun.bind(thisArg[, arg1[, arg2[, ...]]])thisArg
在fun函数运行时指定的this值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。argsArray
一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。arg1, arg2, ...
指定的参数列表。区别：
apply函数的语法与call的语法几乎完全相同，唯一的区别在于，call方法接受的是一个参数列表，而apply方法接受的是一个包含多个参数的数组（或类数组对象）。bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。
- 问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//this 是john 故输出John: hi!
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
//this 指window 所以输出window
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
//第一个this 输出document
//第二个this 输出window
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
//因为使用了call指定了this ，所以this 是john，输出John
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
//由于this 是$btn，没有showMsg这个方法，会报错
//修改:
var module= {
bind: function(){
_this = this //把this即module赋值给_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.prototype.constructor == Person,
Person.prototype == p.__proto__,
Person.__proto__ == Object,
p.__proto__.constructor == Person,
Person.prototype.__proto__ == Object.prototype,
Object.prototype.constructor == Object,
Object.prototype.__proto__ == null
*/
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
- toString是
p._ptoto_._proto_所拥有的方法 - 每个对象上都有一个
__proto__属性，这个属性会指向该对象的原型对象，而原型对象也会有这个__proto__属性指向自己的原型对象，这种关系直到指向Object对象为null，这个链条式的关系就是原型链。
在调用对象的属性和方法时，首先在该对象自己身上找，然后再上原型链上寻找，直到找到合适的为止，如果找到null还未找到就会报错。
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
String.prototype.getMostOften = function(){
var obj={};
for(var i=0;i<this.length;i++){
var name = this[i]
if(!obj[name]){
obj[name] = 1
}else{
obj[name]++
}
}
var maxCount = 0;
var maxEle;
for(var key in obj){
if(obj[key]>maxCount){
maxEle = key;
maxCount = obj[key]
}
}
return maxEle;
}
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
- 作用是判断一个对象是不是由一个构造函数创建的。
- 内部逻辑：顺着对象的原型连一直往上找,若原型链上的某一个
__proto__指向了构造函数的prototype则返回true，找完了原型链也找不到则返回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);
- 方法1把printName方法定义在构造函数本身中，方法2把printName方法定义在构造函数的原型中。 方法1每次实例化对象都要添加这个属性，方法2把通用的方法写在原型对象中，每一个实例都能去引用该方法，节约了空间。
问题13： Object.create 有什么作用？兼容性如何？
- Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。语法：Object.create(proto, [ propertiesObject ])这是ES5的语法，支持ES5的浏览器才支持这么用。
问题14： hasOwnProperty有什么作用？ 如何使用？
hasOwnProperty()可以用来检测一个对象是否含有特定的自身属性,该方法会忽略掉那些从原型链上继承到的属性。
用法：obj.hasOwnProperty(prop) prop为要检测的属性
问题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中的this是Male，所以Male就有了name，age属性
问题16： 补全代码，实现继承
function Person(name, sex) {
// todo ...
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function () {
// todo ...
return this.name;
};
function Male(name, sex, age) {
//todo ...
Person.call(this, name, sex);
this.age = age;
}
//todo ...
Male.prototype = Object.create(Person.prototype)
Male.prototype.getAge = function () {
//todo ...
return this.age;
};
var ruoyu = new Male('若愚', '男', 27);
console.log(ruoyu.getName());
