问题1： apply、call 、bind有什么作用，什么区别
apply ,call,bind都会改变函数的执行上下文，就是改变函数的this指向。
apply和call都是不会改变原函数，但是参数不一样apply的参数是数组。
bind是会创建一个新的函数，当被调用的时候，this还是指向bind()的第一个参数。而且这个新函数再次使用call或apply时失效。
从apply，bind，call的使用可以从以下代码思路出发：
var obj = {
x: 81,
getX: function() {
return this.x;
}
};
alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));
var age=19;
var k={
age:18,
f:function (){
return this.age;
}
}
var p={
age:39
}
var f2=k.f.bind(p);
console.log(f2());//39,this指向的是p
console.log(f2.call(window));//39，因为bind()创建的函数的this还是指向之前bind()第一个参数p，this始终不变
console.log(f2.apply(k));//39，因为bind()创建的函数的this还是指向之前bind()第一个参数p，this始终不变
var f3=k.f.call(window);
console.log(f3());//error，因为call无法产生一个新的函数
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出的是John
可以这么思考 john.sayHi().call(john);
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
输出的是window
思考：func().call(window);this 就是call函数的参数。
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
执行结果：
console.log(this)输出的是 document
而setTimeout种输出的console.log(this)
输出是window
因为setTimeout的this无论在哪个位置指向的都是window
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
输出的结果是：
John 因为func.call(john)中将this改为了指向john对象
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
问题是this.showMsg()中this的指向问题
修改如下：
$btn=$("button");
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this);
this.showMsg();
}.bind(this))
},
showMsg: function(){
console.log('饥人谷');
}
}
module.showMsg();
https://jsbin.com/dazigurisi/5/edit?html,js,console,output
总结this的使用：
大部分的函数调用都将call方法省略了，而call的理解就如同一个对象调用一个方法，而this则是只call的第一个参数。
修改setTImeout或者setInterval的this用bind的方法
image.png
网址为：https://stackoverflow.com/questions/11366643/how-do-i-change-scope-of-this-in-setinterval-and-settimeout-functions
修改click的this指向用bind方法如下：
image.png
网址为：https://stackoverflow.com/questions/5490448/how-do-i-pass-the-this-context-into-an-event-handler
一篇方方介绍了JS 里为什么会有 this
原型链相关问题
方方的一篇关于new 到底是干什么的
https://zhuanlan.zhihu.com/p/23987456
解释：关于new到底是干什么的，我在方方的一篇文章中找到了以下观点：
不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
不用 return 临时对象，因为 new 会帮你做；
不要给原型想名字了，因为 new 指定名字为 prototype。
总结下来就是new其实就是返回了一个对象，这个对象在new的过程中自动创建了一个_ _proto _ 属性，这个对象中会复制构造函数自己所拥有的内容。同时 _proto _ _这个属性会指向构造函数的原型对象。
问题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();
image.png
关系为：
p._ _ proto _ _ ==Peroson.prototype ;
Person.prototype.constructor ==Person;
p.__ proto__.constructor==Person;
Person.prototype.__ proto __ ==Object.prototype;
p. __ proto__.__ proto __ ==Object.prototype;
p. __ proto__.__ proto __ ==Person.prototype.__ proto __;
Object. __ proto __ =null;
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
image.png
toSting()是object.prototype中的
P先从proto中查找是否有toString()方法，如果没有就从p.proto.proto中查找，一直沿着原型链查找，直到object的prototype中找到toString方法
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
代码如下：
var str = 'ahbbccdeddddfg';
String.prototype.getMostOften=function()
{
var str={};
var key;
for(var i=0;i<this.length;i++)
{
key=this[i];
if(str[key])
{
str[key]++;
}
else
{
str[key]=1;
}
}
var max=0,maxkey;
for(var key in str)
{
if(str[key]>max)
{
max=str[key];
maxkey=key;
}
}
return ("出现最多的字符是:"+maxkey+","+"共出现了"+max+"次");
}
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
image.png
问题10： instanceof有什么作用？内部逻辑是如何实现的？
instanceof操作符判断一个对象是不是某个类的实例
instanceof依据原型链上的 _ proto _属性指向了构造函数的prototype
function _instanceof(fn,fn2)
{
var pointer=fn.__proto__;
while(pointer)
{
if(pointer==fn2.prototype)
{
return true;
}
else
{
pointer=pointer.__proto__;
}
}
return false;
}
var arr=[1,2];
var fn2=Object;
console.log(_instanceof(arr, Array));
console.log(_instanceof(arr, fn2));
image.png
问题11：继承有什么作用?
继承是指获取类的属性，类的方法
作用有
1.子类通过继承了父类的属性和方法，就不需要重复代码了
2.子类可以重写和扩展父类的属性和方法，但是又不会影响父类
问题12： 下面两种写法有什么区别?
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);
第一种写法是：p1的内部有name，sex属性和printName方法，p1的 _ _ proto _ _ 指向People的prototype对象
第二种写法是p1的内部有name，sex属性,p1的 _ _ proto_ _指向People的prototype对象,printName方法存放在Person的prototype对象中
问题13： Object.create 有什么作用？兼容性如何？
object.create(）创建一个新对象，并且该对象的原型指向Object.create()的第一个参数对象。
var f={a:1,b:3};
var s=Object.create(f);
console.log(s.__proto__==f);
image.png
兼容性：
凡实现ECS5标准的浏览器，都能使用，IE9以上
问题14： hasOwnProperty有什么作用？ 如何使用？
hasOwnProperty是判断一个属性是否是对象自己所拥有的属性而不是原型对象中的。
var buz = {
fog: 'stack'
};
for (var name in buz) {
if (buz.hasOwnProperty(name)) {
alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
}
else {
alert(name); // toString or something else
}
}
问题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的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.printName = function(){
console.log(this.name);
};
function Male(name, sex, age){
Person.call(this,name,sex);
this.age=age;
}
//将Male的原型对象指向Person，使用create方法是创建一个新的对象，且新函数的原型对象与Person的原型对象相同。这样做的原因是为了防止
Male修改的时候影响父元素的原型对象。
Male.prototype=Object.create(Person.prototype);
Male.prototype.constructor=Male;
Male.prototype.getAge = function(){
console.log(this.age);
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
image.png
总结：对于this的思考，this就是call函数传入的第一个参数。函数调用的时候引入call思考就会很任意的明白this的指向了。
网友评论