this 相关问题
1、apply、call 、bind有什么作用，什么区别
- call方法：
语法：call(thisObj, arg1, arg2…)
定义：调用一个对象的方法，以另一个对象替换当前对象。
说明：call方法可以代替一个对象调用一个方法，call方法可将一个函数的对象上下文从初始的上下文改变由thisObj指向的新对象。如果没有提供thisObj参数，那么全局对象被作为thisObj。
- apply方法：
语法：apply(thisObj, [arg1, arg2…])
定义：应用某个对象的一个方法，用另一个对象替换当前对象。
说明：如果arrArray不是一个有效的数组或者不是arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么全局对象将用做thisObj，并且无法被传递任何参数。 - bind方法：
语法：bind(thisObj, arg1, arg2…)
定义：调用一个对象的方法，以另一个对象替换当前对象。
说明：bind方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的this， 之后的一序列参数将会在传递的实参前传入作为它的参数。如果没有提供thisObj参数，那么全局对象被作为thisObj。 - 区别：
- 都是用来改变函数的this对象的指向的；
- 第一个参数都是this要指向的对象；
- 都可以利用后续参数传参；
- call方法接收参数列表，而apply方法接收参数数组；bind是返回对应函数，便于稍后调用，apply、call是立即调用；
2、以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
// this指向john对象，输出John:hi!
3、下面代码输出什么，为什么？
func()
function func() {
alert(this)
}
// 因为在函数func()被直接调用时，this绑定到全局对象。在浏览器中，window 就是该全局对象。
4、下面代码输出什么？
document.addEventListener('click', function(e){
console.log(this); // 输出document对象,点击页面，控制台输出document。绑定事件函数时，this表示触发此事件的DOM对象。
setTimeout(function(){
console.log(this); // 输出window对象,setTimeout、setInterval这两个方法执行的函数this也是全局对象
}, 200);
}, false);
5、下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
// func()函数通过call()函数调用，此时this代表John对象，john.firstName存在，输出"John"
6、以下代码有什么问题，如何修改
// 修改前
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么 //这里的this指的是触发此事件的DOM对象，不是module。
this.showMsg(); ////由于this是$btn，所以在执行这句是会报错。
})
},
showMsg: function(){
console.log('饥人谷');
}
}
// 修改后
var module= {
bind: function(){
var _this = this
$btn.on('click', function(){
console.log(this)
_this.showMsg();
})
},
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();
- 构造函数Person的prototype对象自带constructor属性指向构造器Person
- 构造函数Person的prototype定义了sayName方法
- new一个Person输入实参生成一个实例对象p
- p的__proto__属性指向构造函数Person的prototype
- p.sayName()先在自身的的方法里找，没有再寻着原型链往上找。
8、上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链
- toString是对象p继承的Object对象的方法。
- 什么是原型链?
JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候，如果对象本身没有找到这个属性，就会沿着原型链一层一层的寻找。
Paste_Image.png
9、对String做扩展，实现如下方式获取字符串中频率最高的字符
// 原代码
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);
// 扩展
var Str = function(str){
this.str = str
// this.getMostOften()
}
Str.prototype.getMostOften = function(){
var obj = {}
var maxValue = ''
var maxNum = 0
for (var i = 0; i < this.str.length; i++) {
var j = this.str[i]
if (!obj[j]) {
obj[j] = 1
} else if(obj[j]) {
obj[j]++
}
}
for(key in obj){
if (obj[key]>maxNum) {
maxValue = key
maxNum = obj[key]
}
}
return '出现频率最高的字符是：' + maxValue + '，共计' + maxNum + '次。'
}
var str = new Str('ahbbccdeddddfg')
ch = str.getMostOften()
ch
console.log(ch) // 出现频率最高的字符是：d，共计5次。
10、instanceOf有什么作用？内部逻辑是如何实现的？
- instanceof运算符用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上。即检测是否是另一个对象的实例。
- 内部逻辑：顺着对象的原型链一直往上找,若原型链上的某一__proto__指向了构造函数的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这个方法作为构造函数方法,在创建P1实例的时候相当于又重新拷贝了一个printName方法.
- 方法二printName这个方法作为原型链方法,创建P1实例的时候相当于借用原型的printName方法.
- 推荐使用第二种。方法2把通用的方法写在原型对象中，每一个实例都能去引用该方法，节约了空间。
13、Object.create 有什么作用？兼容性如何？
- Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象，
他的语法为：Object.create(proto, [ propertiesObject ])
参数：
Object：一个对象，作为新创建对象的原型。或者为 null
propertiiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。
14、hasOwnProperty有什么作用？ 如何使用？
- hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一 一个处理属性但是不查找原型链的函数。
- 用法：obj.hasOwnProperty(prop) // prop为要检测的属性
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 ,让 Male 继承 Person 的属性
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.__proto__ = Person.prototype
// function fn(){}
// fn.prototype = Person.prototype
// var Male.prototype = new fn()
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.getAge = function(){
console.log(this.name)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
