this
一、apply、call 、bind的作用与区别
-
bind：返回一个新函数，并且使函数内部的this为传入的第一个参数
var fn3 = obj1.fn.bind(obj1);
fn3();
-
call/apply：调用一个函数，传入函数执行上下文及参数，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组
fn.call(context, param1, param2...)
fn.apply(context, paramArray)
fn2.call(obj1);
fn2.apply(obj1);
二、实例
1. 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出结果为John: h1!。
这是由于john.sayHi()语句可被改写为john.sayHi.call(john)，当其被调用时，函数体内部的this为对象john本身。
2. 下面代码输出什么，为什么?
func()
function func() {
alert(this)
}
输出window对象。
因为func()是在全局作用域下被调用，其可被改写为window.func.call(window)，函数内部this为window对象
3. 下面代码输出什么？
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
第一个console.log输出document对象，this为document本身；第二个输出window对象，因为setTimeout函数是在全局作用域下执行的
4. 下面代码输出什么，why？
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
输出John。
因为函数调用时用call方法指定了john对象
5. 以下代码有什么问题，如何修改？
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
在bind属性的$btn.on('click', function())函数内部的this指代$btn，因此无法调用showMsg()。
改动如下：
var module= {
bind: function(){
var _this = this
$btn.on('click', function(){
console.log(this) //this指什么
_this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
原型链
一、instanceOf有什么作用？内部逻辑是如何实现的？
instanceOf操作符可用于判断一个对象是不是某个类型的实例
[1, 2, 3] instanceof Array; //true
[1, 2, 3] instanceof Object; //true
注意： instanceof运算符是用来检测
constructor.prototype是否在参数object的原型链上
function C() {}
function D() {}
var o = new C()
o instanceof C; //true,因为Object.getPrototypeOf(o) === C.prototype
o instanceof D; //false,因为D.prototype不在o的原型链上
二、实例
1. 有如下代码，解释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是构造体constructor，其构造了函数p，p是其实例；
Person.prototype是Person的原型对象；
__proto__是p的原型链，指向Person的prototype。
2. 上一题中，对对象 p我们可以这样调用 p.toString()。toString是哪里来的? 画出原型图，并解释什么是原型链。
toString来自于Object.prototype。
我们通过函数定义了类Person，类（函数）自动获得属性prototype，而每个类的实例都会有一个内部属性__proto__，指向类的prototype.。
因此p.__proto__ -> Person.prototype (->) Person.prototype.__proto__ -> Object.prototype (->) Object.prototype.__proto__ -> null就是原型链。
3. 对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
代码如下：
var str = 'ahbbccdeddddfg';
String.prototype.getMostOften = function(){
var tmp = {}
for(var i=0; i<this.length; i++){
if(!tmp[this[i]]){
tmp[this[i]] = 1
}else{
tmp[this[i]]++
}
}
var max = 0
var idx = ''
for(var i in tmp){
if(max < tmp[i]){
max = tmp[i]
idx = i
}
}
return idx+' ,因为'+idx+'出现了'+max+'次'
}
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
继承
一、Object.create 有什么作用？
Object.create(proto[, propertiesObject ])可以创建一个拥有指定原型和若干个指定属性的对象：
-
proto：一个对象，作为新创建对象的原型。或者为null。 -
propertiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
Male.prototype = Object.create(Person.prototype);
Male.prototype.printAge = function(){
console.log(this.age);
};
二、hasOwnProperty有什么作用？给出范例
hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数。
m.hasOwnProperty('name'); // true
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true
三、实例
1. 下面两种写法有什么区别?
//方法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('若愚', 2);
- 方法1中，
name、sex与printName均是p1自身的属性 - 方法2中，
name、sex是p1自身的属性，而printName是p1的原型对象Person.prototype的自定义对象，p1可以继承其属性与方法，从而节约代码量，提高性能。
2. 如下代码中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方法，指定Person方法中的this为Male，并传入参数sex、age。
3. 补全代码，实现继承
function Person(name, sex){
// todo ...
}
Person.prototype.getName = function(){
// todo ...
};
function Male(name, sex, age){
//todo ...
}
//todo ...
Male.prototype.getAge = function(){
//todo ...
};
var hugner = new Male('饥人谷', '男', 2);
hunger.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
}
Person.prototype.printName = function(){
console.log(this.getName())
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.getAge = function(){
return this.age
};
var hunger = new Male('饥人谷', '男', 2);
hunger.printName();
