this and inheritance

2017-10-09

this 相关问题

问题1： apply、call 、bind有什么作用，什么区别

1
2
3

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();

关联：

1 2	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)

1	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有什么作用？如何使用？

hasOwnPerperty可以判断一个对象包含的某个属性是否为自定义属性，而不是原型链上的属性。
hasOwnPerperty是JavaScript中唯一一个处理属性但是不查找原型链的函数

1 2	//语法 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('若愚', '男', 27);
ruoyu.printName();
ruoyu.printAge();

this 相关问题

问题1： apply、call 、bind有什么作用，什么区别

问题2： 以下代码输出什么?

问题3： 下面代码输出什么，为什么