问题1: apply、call 、bind有什么作用,什么区别
- bind,apply,call:都是返回一个函数,用括号里的参数改变原本this的指向。
var obj3 = {name:'cwn'}
function obj(){
console.log(this)
}
obj()//window this指向了window
obj.bind(obj3)()//指向了obj3,bin改变了this的指向,但是并不是执行了函数
var obj3 = {name:'cwn'}
function obj(a,b){
console.log(this.name + a + b)
}
obj(2,3)//23
obj.call(obj3,2,3)//cwn23 可以传递参数,第一个参数就是this指向的对象,并且立即执行函数
obj.apply(obj3,[2,3])//和call一样,只不过传递的参数不一样
bind:不能立即执行,只是改变了this的指向。
call:执行了函数,并且改变了this的指向,还能传递参数
apply:传递参数的方式以数组形式传递。其他和call一样
问题2: 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() // 输出了John hi
//在john新建了属性,func,this的指向自然会改变指向john对象,所以输出了John hi
问题3: 下面代码输出什么,为什么
func()
function func() {
alert(this)
} //window
//this指向的是全局的window
问题4:下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);//document对象
setTimeout(function(){
console.log(this);//window对象
}, 200);
}, false);
//第一个this指向的是点击的元素
//第二个this找自己作用域的this,找不到向上找,也找不到,自然指向全局作用域的this
问题5:下面代码输出什么,why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)//John
//call改变了func里this的指向,指向了john对象
问题6: 以下代码有什么问题,如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么:被点击的元素
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
修改
var module= {
bind: function(){
var _this = this //把this赋值到变量上
$('.but').on('click', function(){
console.log(this) //this指$btn
_this.showMsg(); //this指向$btn,$btn没有showMsg方法
})
},
showMsg: function(){
console.log('饥人谷');
}
}
module.bind()
//或者
var module= {
bind: function(){
$('.but').on('click', function(){
console.log(this)
this.showMsg();
}.bind(this))//改变指向
},
showMsg: function(){
console.log('饥人谷');
}
}
module.bind()
原型链相关问题
问题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();
- 声明了
Person
函数 - 在
Person
函数里有一个prototype
属性,这个属性指向原型对象。 - 在原型对象里创建一个属性
sayName
- 通过new关键字构造对象,并且赋值给p,p里面的
_proto_
也指向了prototype
原型对象。 - 原型对象中,有一个constructor属性,他指向回,函数Person。
所以 p1._proto_.constructor === Person
p1._proto_ === Person.prototype
问题8: 上例中,对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
Paste_Image.png问题9:对String做扩展,实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
String.prototype.getMostOften = function(){
var wrap = {}
var num = 0
var str =''
for(var i = 0;i<this.length; i++){
if (wrap[this[i]]) {
wrap[this[i]]++
}else{
wrap[this[i]]=1
}
}
for(var x in wrap){
if (wrap[x]>num) {
num = wrap[x]
str = x
}
}
return str
}
var str = "aaaa4564bbbbbccccccccc"
var ch = str.getMostOften()
console.log(ch) //c
问题10: instanceOf有什么作用?内部逻辑是如何实现的?
- instanceof用于判断一个对象的类型,那么它的判断规则是什么?
- Instanceof运算符的第一个变量一般是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。
- Instanceof的判断规则是:沿着A的proto这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回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);
-
方法一:方法
printName
是在函数People中创建,p1继承的是Person的里的属性和方法。 -
方法二:方法
printName
是在Person的原型里添加创建。printName
是一个公用方法。达到了节省内存的效果。
问题13: Object.create 有什么作用?兼容性如何?
- 作用:创建一个拥有指定原型和若干个指定属性的对象。
例子:
function Person(name){
this.name = name
}
Person.prototype.look = function(){
console.log(123)
}
var p = new Person('ruoyu')
function Student(name){
Person.call(this,name)
}
Student.prototype = Object.create (Person.prototype)
//相当于Student.prototype.__proto__ =Person.prototype
var s = new Student('cwh')
-
兼容性:
Paste_Image.png
问题14: hasOwnProperty有什么作用? 如何使用?
- 作用:判断一个对象是不是自己本身拥有该属性和方法。
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
p1.hasOwnProperty('name')//true
p1.hasOwnProperty('printName')//false 因为printName是在p1的原型上
问题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的方法,不过this指针指向Male,并传入了Male自己的参数。
问题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
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.getAge = function(){
console.log(this.name)
};
Male.prototype.printName = function(){
console.log(this.name)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
网友评论