this 相關問題
apply、call 、bind有什么作用，什么區(qū)別
- Function.prototype.call()
可以指定該函數內部 this的指向（即函數執(zhí)行時所在的作用域），然后在所指定的作用域中，調用該函數。并且會立即執(zhí)行該函數。- Function.prototype.apply()
apply方法的作用與call方法類似，也是改變this指向（函數執(zhí)行時所在的作用域），然后在指定的作用域中，調用該函數。同時也會立即執(zhí)行該函數。唯一的區(qū)別就是，它接收一個數組作為函數執(zhí)行時的參數。- Function.prototype.bind()
bind方法用于指定函數內部的this指向（執(zhí)行時所在的作用域），然后返回一個新函數。bind方法并非立即執(zhí)行一個函數。
來源
以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//John: hi!
下面代碼輸出什么，為什么
func()
function func() {
alert(this)
}
//window 直接用，作用域是全局作用域
下面代碼輸出什么
document.addEventListener('click', function(e){
console.log(this); //document
setTimeout(function(){
console.log(this); //window
}, 200);
}, false);
下面代碼輸出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
// John 將func的this指向john對象
以下代碼有什么問題，如何修改
var module= {
bind: function(){
var _this = this // 這里的this指調用這個方法的對象 存在_this里
$btn.on('click', function(){
// console.log(this) // this指被點擊的$btn
// this.showMsg(); //$btn沒有這個方法
_this.showMsg() // 現在可以使用showMsg()了
})
},
showMsg: function(){
console.log('饑人谷');
}
}
module.bind()
原型鏈相關問題
有如下代碼，解釋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.__proto__ === Function.prototype
Person.prototype.__proto__ === Object.prototype
p.__proto__ === Person.prototype
Person.prototype.constructor === Person
上例中，對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。
原型圖.png
JavaScript 對象有一個指向一個原型對象的鏈。當試圖訪問一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依此層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾。
對String做擴展，實現如下方式獲取字符串中頻率最高的字符
String.prototype.getMostOften = function(){
var arr = this.split('')
var counts = {}
var max = 0
var maxkey = 0
arr.forEach(function(val){
if(!counts[val]){ counts[val] = 1; }
else{ counts[val]++ }
})
for( val in counts){
if(counts[val] > max){
max = counts[val]
maxkey = val
}
}
return maxkey
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d
instanceOf有什么作用？內部邏輯是如何實現的？
instanceof判斷一個對象是否是某個構造函數的實例
如：object instanceof constructor
檢測 constructor.prototype 是否存在于參數 object 的原型鏈上
function People(){}
var john = new People()
john instanceOf People //true
//john.__proto__ === People.prototype
繼承相關問題
繼承有什么作用?
把公用的方法屬性放在父類，子類就不需要單獨再寫，可以通過繼承使用。子類還可以單獨添加自己的方法和屬性，不會影響到父類。
下面兩種寫法有什么區(qū)別?
//方法1 每次new People()都會使用各自的printName()
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('饑人谷', 2)
//方法2 把printName()放在Person.prototype，這樣實例化出來的對象使用的就是同一個printName()
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
Object.create 有什么作用？兼容性如何？
Object.create() 會使用指定的原型對象及其屬性去創(chuàng)建一個新的對象。(克隆指定的原型對象及其屬性)
Object.create是ES5的方法，IE9及以上支持，兼容性良好。
使用Object.create()來實現類式繼承
//Shape - superclass
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info("Shape moved.");
};
// Rectangle - subclass
function Rectangle() {
Shape.call(this); //call super constructor.
}
// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
//rect instanceof Object //true
rect.move(1, 1); //Outputs, "Shape moved."
問題14： hasOwnProperty有什么作用？ 如何使用？
所有繼承了 Object 的對象都會繼承到hasOwnProperty
方法。這個方法可以用來檢測一個對象是否含有特定的自身屬性；和 in
運算符不同，該方法會忽略掉那些從原型鏈上繼承到的屬性。
o = new Object();
o.prop = 'exists';
function changeO() {
o.newprop = o.prop;
delete o.prop;
}
o.hasOwnProperty('prop'); // 返回 true
changeO();
o.hasOwnProperty('prop'); // 返回 false
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false
如下代碼中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 調用Person函數，this指向Male，使Male獲取Person下的屬性
補全代碼，實現繼承
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.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
