问题1： apply、call 、bind有什么作用，什么区别
bind: 返回一个新函数，并且使函数内部的this为传入的第一个参数，用来切换作用域，任何函数都有bind的方法
var obj1 = {
name: 'Byron',
fn : function(){
console.log(this);
}
};
var fn3 = obj1.fn.bind(obj1)
fn3()
//此时如果没有bind,调用fn3()返回的是window
call apply调用一个函数，传入函数执行上下文及参数,第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组。
var value = 100
var obj4 = {
value: 200
}
function fn4(a,b){
console.log(this.value + a + b)
}
fn4(3, 4)
fn4.call(obj4, 3, 4)
fn4.call(obj4, [3, 4])
apply的使用
var arr = [1,2,3,7]
console.log(Math.max.apply(null, arr))
call的使用
function joinStr(){
console.log(Array.prototype.join.call(arguments, '-'))
}
joinStr('a','b','c')
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
弹出一个alert写着 John: hi!
使func赋值给了john的方法sayHi，然后john调用sayHi，则this指向john
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
输出的[object Window]
alert里的this是全局对象window
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
输出的
#document
Window
第一个this执行后是document
第二个this执行后是全局对象window
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
输出的一个alertJhon
因为func.call(john)是func调用了john的this
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指$btn
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
因为此时this指向$btn，this.showMsg()不生效
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
}.bind(this))
},
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属性，prototype属性，包含着__proto__、constructor、sayName。
Person.prototype.constructor===Person
p.__proto__.constructor===Person
p.constructor===Person
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
调用的p.toString是从原型链中找到的，如果对toString进行赋值，所赋值的toString会覆盖原型中的toString
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
String.prototype.getMostOften = function(){
var dict = {}
var key
for(var i=0; i<this.length; i++){
key = this[i]
if(!dict[key]){
dict[key]=1
}else{
dict[key]++
}
}
var count = 0
var maxValue
for(var key in dict){
if(dict[key]>count){
maxValue = key;
count = dict[key]
}
}
return maxValue
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
instanceOf用来判断一个对象是不是某个类型的实例。判断依据是这个对象的__proto__是否等于类型的prototype，如果相等结论是true，如果不相等找对象.__proto__.__proto__....__proto__此时如果还是不等于该函数的prototype结论为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);
将printName这个方法放到prototype中，可以在prototype中调用，节省资源，不会每一次的调用就会新建一个printName的属性。
问题13： Object.create 有什么作用？兼容性如何？
创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
NewObject.prototype = Object.create (OldObject.prototype)
如果不能用es5的语法想达到object.create的功能可以使用以下写法
fn.prototype = OldObject.prototype
function fn(){}//创建一个空函数，将所需对象原型传入，再传入新对象。
NewObject.prototype = new fn()
问题14： hasOwnProperty有什么作用？ 如何使用？
判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数
以16题为例：
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.getName = function(){
console.log('My name is' + ' ' + this.name)
};
function Male(name, sex, age){
Person.call(this, name, sex)
this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.printName = function(){
console.log(this.name)
}
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('ruoyu', 'male', 35);
ruoyu.getName()
ruoyu.printName();
ruoyu.getAge()
ruoyu.hasOwnProperty('getAge')//false
ruoyu.hasOwnProperty('name')//true
真正属于ruoyu的属性只有：name，age，sex。其余的都在它的原型上面
问题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;
}
此时的this指Male，然后继承Person中的sex和age
问题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.getName = function(){
console.log('My name is' + ' ' + this.name)
};
function Male(name, sex, age){
Person.call(this, name, sex)
this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.printName = function(){
console.log(this.name)
}
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('ruoyu', 'male', 35);
ruoyu.getName()
ruoyu.printName();
ruoyu.getAge()
网友评论