this 相关
问题1： apply、call 、bind有什么作用，什么区别
apply()和call()方法都是在指定一个this值和参数的情况下调用某个函数。
bind()方法创建一个新的函数, 当被调用时，它的this关键字被设置为提供的值 ，在调用新函数时，提供任何一个给定的参数序列。
区别
- apply与call只有一个区别
- call()方法接受的是若干个参数的列表。
fun.call(thisArg[, arg1[, arg2[, ...]]]) - apply()方法接受的是一个包含多个参数的数组。
fun.apply(thisArg[, argsArray])
- call()方法接受的是若干个参数的列表。
- bind()与call和apply不同之处在于它返回一个函数,
fun.bind(thisArg[, arg1[, arg2[, ...]]])
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //输出john: hi! , 方法调用,this指向调用者
问题3： 下面代码输出什么，为什么
func() //输出window, this是全局对象
function func() {
alert(this)
}
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this); //输出document, 在事件处理程序中this代表事件源DOM对象
setTimeout(function(){
//输出window, setTimeout和setInterval执行的函数this是全局对象
console.log(this);
}, 200);
}, false);
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) //输出John, call()的第一个参数指定了this为john对象
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //这里的this指$btn
this.showMsg(); //$btn上没有showMsg()这个方法
})
},
showMsg: function(){
console.log('饥人谷');
}
}
// 修改后
var module= {
bind: function(){
var _this = this //这时this的值是module, 把值存入_this
$btn.on('click', function(){
console.log(this) //this为$btn
_this.showMsg(); //输出饥人谷
})
},
showMsg: function(){
console.log('饥人谷');
}
}
原型链相关问题
问题7：有如下代码，解释Person、 prototype、__proto__ 、p、constructor之间的关联。
- Person是函数定义的类, 类（函数）自动获得属性prototype。
- p是Person的实例, 每个类的实例都会有一个内部属性__proto__ ，指向类的prototype属性
- prototype是构造函数内部的原型对象，所以拥有contructor和__proto__ 属性。constructor指向了构造函数Person。
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
当调用p.tostring()时, 先会在p里找tostring方法, 找不到会沿着__proto__到 Person.prototype中找,还找不到就接着沿着__proto__找, 直到在object.prototype中找到为止
p.__proto__ ==> Person.prototype.__proto__ ==> object.prototype
原型图.png
在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
代码:
String.prototype.getMostOften = function(){
var obj = {}
for(var i=0; i< this.length; i++){
if(obj[this.charAt(i)]){
obj[this.charAt(i)]++
}else if(!obj[this.charAt(i)]){
obj[this.charAt(i)] = 1
}
}
var max = 0,
val = ''
for(var key in obj){
if(obj[key] > max){
max = obj[key]
val = key
}
}
return val
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
语法:object instanceof constructor
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。即左侧的对象是否是右侧类的实例，如果是则表达式返回true；否则返回false。
内部逻辑: 循环判断 obj.__proto__.__proto__..... === con.prototype
继承
问题11：继承有什么作用?
继承是指一个对象直接使用另一对象的属性和方法。
优点:
- 优化代码结构和对象关系
- 优化内存空间, 一些共用的方法和属性不用重复写了. 子类需要添加或修改新的方法时, 可以重写或扩展而不影响父类
问题12： 下面两种写法有什么区别?
方法2把printName写到了原型链里, 节约了代码量, 提高了性能, 而方法1写在构造函数中, 每创造一个实例都要运行一遍printName函数.
//方法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);
问题13： Object.create 有什么作用？兼容性如何？
Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。
child = Object.create(parent.prototype)
//使child.__proro__ = parent.prototype
ES5兼容性
问题14： hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性
hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数
obj.hasOwnProperty(prop)
//prop : 要检查的属性名
//obj: 要检查的对象
//返回一个布尔值
问题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;
}
问题16： 补全代码，实现继承
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.getName = function(){
console.log(this.name)
};
function Male(name, sex, age){
Person.call(this, name, sex)
this.age = age
}
function inherit(superType, subType){
subType.prototype = Object.create(superType.prototype)
subType.prototype.constructor = subType
}
inherit(Person, Male)
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
