1、apply、call 、bind有什么作用，什么区别
- 在JS中，这三者都是用来改变函数的this对象的指向的
- 都是用来改变函数的this对象的指向的。
- 第一个参数都是this要指向的对象。
- 都可以利用后续参数传参。
- 区别
- bind，返回一个新函数，并且使函数内部的this为传入的第一个参数；若函数还需其他参数需在调用时传入。
var fn3 = obj1.fn.bind(obj1);fn3(); - call方法接收参数列表
fn.call(context, param1, param2...) - 而apply接收参数数组
fn.apply(context, paramArray)
- bind，返回一个新函数，并且使函数内部的this为传入的第一个参数；若函数还需其他参数需在调用时传入。
2、以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出"John:hi!" ,func函数的this指向window对象，func函数赋值给john对象的sayHi方法后并调用，this指向john对象。
3、下面代码输出什么，为什么
func()
function func() {
alert(this)
}
func函数this在函数找不到，就会到func所在的作用域（全局作用域）找，所以this指向顶层全局对象window；也就是当前执行环境是window，alert [object Window]
4、下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
//document，点击事件回调方法执行时，this指向document
//window，定时器回调函数执行时，this指向window
5、下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
输出"John",call方法改变func函数的this对象的指向，this指向john对象
6、 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('hello');
}
}
问题：在$btn的点击回调函数中，this指向$btn,$btn对象没有showMsg属性，this.showMsg()方法执行时会报错，this.showMsg is not a function
- 使用bind()方法绑定函数内的this对象
var module= {
bind: function(){
$('.btn').on('click', function(){
console.log(this) //this指什么
this.showMsg();
}.bind(this))
},
showMsg: function(){
console.log('hello');
}
}
- 使用中间变量保存this对象
var module= {
bind: function(){
var _this= this;
$('.btn').on('click', function(){
console.log(_this) //this指什么
_this.showMsg();
})
},
showMsg: function(){
console.log('hello');
}
}
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("John")
p.sayName();
通过函数定义了类Person，类（函数）自动获得属性prototype；
Person的prototype也是一个对象，内部有一个constructor属性，该属性指向Person；
Penson的实例对象p，有一个内部属性 _proto_，指向类的prototype属性。
p.__proto__ === Person.prototype
p.__proto__.constructor === Person.prototype.constructor === Person
8、 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
- toString是哪里来的
- 对象p会在自己的属性和方法找，找到后就返回；
- 没有找到，通过p的proto属性，找到其类型Person的prototype属性(原型对象)，继续查找，找到就返回；
- 没有找到，通过prototype的_proto_属性找到Object的prototype属性(任何类的prototype属性本质上都是个类Object的实例,所以prototype也和其它实例一样也有个_proto_内部属性，指向其类型Object的prototype),找到返回。
- 原型图
原型链.png
- 解释什么是原型链
JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候，如果对象本身没有找到这个属性，就会沿着原型链一层一层的寻找。
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++){
var item = this.substr(i,1)
if(obj[item]){
obj[item]++
}else{
obj[item] = 1
}
}
var num =0,max = null
for(key in obj){
if(obj[key]>num){
num = obj[key]
max = key
}
}
return max
}
var str = 'ahbbccdeddddfg'
var ch = str.getMostOften()
console.log(ch)
10、 instanceOf有什么作用？内部逻辑是如何实现的？
instanceof运算符返回一个布尔值，表示指定对象是否为某个构造函数的实例。instanceof的原理是检查原型链，对于那些不存在原型链的对象，就无法判断。
var arr = [1, 2, 3];
arr instanceof Array; //true
其实是判断arr.__proto__===Array.prototype
arr instanceof Object; //true
判断arr.__proto__.__proto__===Object.prototype
11、继承有什么作用?
继承是指一个对象直接使用另一对象的属性和方法。通过继承，可以使子类共享父类的属性和方法，可以覆盖(重写)和扩展父类的属性和方法，减少内存的使用，提高代码复用性。
12、 下面两种写法有什么区别?
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('John', 2)
//方法2
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('Lisa', 27);
方法1中每个实例的printName方法实际上作用一样，但是每个实例要重复一遍，大量对象存在的时候是浪费内存；
方法2中把printName方法存放到Person.prototype里，每个实例对象的proto都指向Person.prototype能访问到，减少了对象的使用。
13、 Object.create 有什么作用？兼容性如何？
Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。
可以让另外一个构造函数的 prototype 的 _proto_ 等于这个创建的对象，实现继承。如：
//Person父类
function Person (name) {
this.name=name
}
Person.prototype.say = function () {
console.log('My name is ' + this.name)
}
//Student子类
function Student (name) {
this.name = name
}
Student.prototype.study = function () {
console.log('I am studying!')
}
//Student.prototype.__proto__ === Person.prototype
Student.prototype.__proto__ = Object.create(Person.prototype)
var xiaohong = new Student('xiaohong')
console.log(xiaohong.name)
xiaohong.study()
xiaohong.say()
//"xiaohong"
//"I am studying!"
//"My name is xiaohong"
兼容性：各大浏览器的最新版本（包括IE9）都兼容了这个方法。如果遇到老式浏览器，可以用下面的代码兼容：
if(!Object.create){
Object.create = function(obj){
function F(){};
F.prototype = obj;
return new F();
}
}
或
if(!Object.create){
Object.create = function(obj){
var obj1 = {};
obj1.__proto__ = obj;
return obj1;
}
}
14、 hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一个方法，返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。
使用方法：obj.hasOwnProperty(prop)
prop：要检测的属性 （字符串 名称或者 Symbol）。
o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop'); // 返回 true
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false
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的实例对象可以使用Person的属性。
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('John', '男', 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 = Object.create(Person.prototype).constructor
//或Male.prototype.__proto__ = Object.create(Person.prototype)
Male.prototype.getAge = function(){
console.log('I am ' + this.age)
};
var ruoyu = new Male('Jon', '男', 27);
ruoyu.getName();
//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 = Object.create(Person.prototype).constructor
//或Male.prototype.__proto__ = Object.create(Person.prototype)
Male.prototype.getAge = function(){
console.log('I am ' + this.age)
};
var ruoyu = new Male('John', '男', 27);
ruoyu.getName();
网友评论