this 相关问题
问题1： apply、call 、bind有什么作用，什么区别
fn.call(context, param1, param2...)
fn.apply(context, [param1,param2...])
fun.bind(context, param1, param2...)
context：在函数运行时指定的 this 值。需要注意的是，如果这个函数处于非严格模式下，指定为 null 或 undefined 时会自动指向全局对象window。
作用：
- apply()、call()方法在指定this值和参数的情况下调用函数
- bind()是ES5的新方法，该方法创建一个新的函数(称为绑定函数)，新函数与被调函数（绑定函数的目标函数）具有相同的函数体。当被调用时，第一个参数决定了运行时的this，之后传入的参数将会作为函数执行时的实参来使用。
相同：
三者都是用来改变函数的this对象的指向的；第一个参数都是this要指向的对象，也就是想指定的上下文；都可以利用后续参数传参；
不同：
bind返回对应的函数，便于稍后调用；apply，call则是立即调用。apply参数是数组或者类数组对象，call参数是参数列表。
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//John :hi!
注意：john.sayHi() 相当于 john.sayHi.call(john);
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
输出：window
func()等价于 func.call(undefinded)
在非严格模式下浏览器会将undefined变为Window
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
结果：第一个console.log(this)的结果是#document,因为此处的this指向被点击的目标，setTimeout中的console.log(this)是指向window
注意：setTimeout、setInterval这两个方法执行的函数this是全局对象
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
//结果john ,func.call(john)改变了this的值，当前的this变成了john这个对象。
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //此处的this指的是被点击的$btn
this.showMsg(); //但是$btn对象上并没有showMessage这个方法，所以报错。
})
},
showMsg: function(){
console.log('饥人谷');
}
}
-----------修改后
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this);
this.showMsg();
}.bind(this)); //将this对象指向module对象
},
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();
关联：
p.__proto__ === Person.prototype
Person.prototype.constructor === Person
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链
首先会向p中查找有没有toString方法，没有就向创建p的对象Person.prototype中查找，发现也没有，Person既是创建p的对象，同时也是对象Object创建的实例，所以向创建Person的Object.prototype中查找toSring()就查找到了。
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
String.prototype.getMostOften = function (){
var obj = {};
for(var i = 0;i<this.length; i++){
var j =this[i];
if(obj[j]){
obj[j]++;
}
else{
obj[j]= 1;
}
}
var max = 0 ,key= 0 ;
for(var k in obj){
if(obj[k]>max){
max = obj[k];
key= k;
}
}
return max;
};
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
instanceof操作符，用于判断一个对象是不是某个类型的实例,
它是通过测试一个对象(object)的原型链上是否有某个构造函数的原型(prototype)
A instanceOf B; // 返回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方法在People的实例对象上，当每次创建一个People实例对象都会额外开辟内存去存放printName,方法2中的printName是写在原型上，当实例对象要使用该方法只需到原型链里调用就可以了，达到节省内存的效果。
问题13： Object.create 有什么作用？兼容性如何？
Object.create(proto, [ propertiesObject ])
作用：
使用指定的原型对象及其属性去创建一个新的对象
proto：用作新对象原型的对象
propertiesObject：（可选的）一个为新对象定义额外属性的对象
用法例子
Student.prototype = Object.create(Person.prototype)
这里我们通过Object.create复制了一个新的prototype而不是直接把Person.prtotype直接赋值，因为引用关系，这样会导致后续修改子类的prototype也修改了父类的prototype，因为引用关系修改的是同一个值。
兼容性：
Object.create是ES5方法，之前版本通过遍历属性也可以实现浅拷贝
问题14： hasOwnProperty有什么作用？ 如何使用？
-
hasOwnProperty可以判断一个对象包含的某个属性是否为自定义属性，而不是原型链上的属性。 -
hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数
//语法
Object.hasOwnProperty(attributeName)
问题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的作用，当new Male时，Male中的this指向创建的对象，call把Person中的this设置为创建的对象，就达到了继承Person属性的目的。
问题16： 补全代码，实现继承
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
};
function Male(name, sex, age){
Person.call(this,name,age);
this.age = age;
}
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.printAge = function(){
console.log("My age is "+this.age);
};
var ruoyu = new Male('xx', '男', 22);
ruoyu.printName();
ruoyu.printAge();
网友评论