一、apply、call 、bind有什么作用,什么区别?
首先说明,这三者的主要用途都是为了:调用函数时,使用你指定的this
- apply
调用一个函数,为其指定
this
,参数以数组形式传入。
- call
调用一个函数,为其指定
this
,分别提供参数。
- bind
返回一个函数,并为其指定
this
如(当全局环境变量不是window
的时候,直接运行sum
可能返回NaN
):
var value = 2
function sum(a, b) {
// console.log(this.value + a + b, 1)
return this.value + a + b
}
//直接调用
sum(3, 4) // 2 + 3 + 4 = 9
//apply 指定 this,参数以数组形式传递
var obj1 = {
value: 5
}
sum.apply(obj1, [3, 4]) // 5 + 3 + 4 = 12
//call 指定 this,分别提供参数
var obj2 = {
value: 6
}
sum.call(obj2, 3, 4) // 6 + 3 + 4
//bind 指定 this,返回一个新的函数
var obj3 = {
value: 7
}
var newSum = sum.bind(obj3)
newSum(3,4) // 7 + 3 + 4
二、 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出John: hi!
,因为这里的sayHi
是john
调用的,所以this
指向的就是join
对象。
三、下面代码输出什么,为什么
func()
function func() {
alert(this)
}
在浏览器运行时,this
是window
,因此,代码运行后,会弹窗显示window
对象。
四、下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
第一个this
是document
,因为事件绑定自动把this
指向为对应元素。第二个this
为window
,因为匿名函数的执行是在window
全局下的。
五、下面代码输出什么,why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
弹窗显示John
,因为call
指定了this
为john
对象。
六、以下代码有什么问题,如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
上面的this
指向调用事件的 DOM 元素,要想让this
指向对象本身,可以先保存原来的this
,如:
var module= {
bind: function(){
var self = this
$btn.on('click', function(){
console.log(self)
self.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
七、有如下代码,解释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
是构造函数,prototype
是构造函数的共有属性。p
是Person
的实例,该实例有__proto__
对象指向Person.prototype
。constructor
表示该实例的构造器,指向Person
。
p.__proto__.constructor === Person.prototype.constructor === Person
八、上例中,对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
toString
是p
原型链上Object
构造函数的方法。
九、对 String 做扩展,实现如下方式获取字符串中频率最高的字符
题目
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
解决
String.prototype.getMostOften = function(){
let data = this
let obj = {}
for (let i = 0; i < data.length; i++) {
if (obj[data[i]]) {
obj[data[i]]++
} else {
obj[data[i]] = 1
}
}
let max = 0
let maxStr = ''
for (let it in obj) {
if (obj[it] > max) {
max = obj[it]
maxStr = it
}
}
return maxStr
}
十、instanceOf 有什么作用?内部逻辑是如何实现的?
instanceOf
用来判断一个对象是是否是一个构造函数的实例。内部是通过判断instance.__proto__ === Object.prototype
是否相同来实现的,假如当前不相等,就会根据原型链往上找,instance.__proto__.__proto__ === Object.prototype
,直到null
,找到就返回true
,否则为false
。
十一、继承有什么作用?
继承可以复用父类的属性和方法,无需重写,同时可以在子类上进行扩展。继承既可减少代码又易于扩展。
十二、下面两种写法有什么区别?
//方法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);
第一种写法,每次new
出来的实例,都会产生新的属性和方法,占用过多不必要的内存。第二种写法,每次new
出来的实例,会产生新的属性,但方法都在共有的属性原型链(prototype)上,节省内存。
十三、Object.create 有什么作用?兼容性如何?
Object.create()
方法会使用指定的原型对象及其属性去创建一个新的对象,实现类式继承。如:
Student.prototype = Object.create(Person.prototype);
十四、hasOwnProperty 有什么作用? 如何使用?
hasOwnProperty()
方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(是自身属性,不包含prototyep
)。
function Person(){
this.name = 'jack'
}
Person.prototype.commonName = 'Person'
var a = new Person()
console.log(a.hasOwnProperty('name'))
十五、如下代码中 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
把this
指向当前的Male
,实现继承Person
。
十六、补全代码,实现继承
function Person(name, sex) {
// todo ...
this.name = name
this.sex = sex
}
Person.prototype.getName = function () {
// todo ...
return this.name
};
function Male(name, sex, age) {
//todo ...
Person.call(this, name, sex)
this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
//todo ...
Male.prototype.getAge = function () {
//todo ...
return this.age
};
Male.prototype.printName = function(){
console.log('My name is ' + this.getName() + '.')
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();