this：
1. apply、call 、bind有什么作用，什么區別
共同作用：通過傳入參數都可以改變this的值
區別：
bind調用時會生成一個新函數
var fn1 = obj.fn.bind(obj) //原來window下調用的fn1(this-->window)
fn1() //變成你希望調用的obj(this-->obj)
直接調用這個函數時，加上call和apply之后，就可以傳入你希望傳入的函數執行上下文和參數
fn.call(context, a , b, c)
fn.apply(context, [a, b, c])
不同的是call直接接受參數傳入，apply接受參數列表傳入
下面有一個實例：
傳入函數調用時生成的arguments(沒有數組方法)生成我們需要的字符串的拼接
function joinStr(){
var join = Array.prototype.join.bind(arguments, '-')
return join('') //生成一個新函數，返回'a-b-c'
}
joinStr('a', 'b', 'c')
<--------------------------------------------->
function joinStr(){
//Array.prototype可以換成數組的一個實例[]
return Array.prototype.join.call(arguments, '-') //返回'a-b-c'
}
joinStr('a', 'b', 'c')
2.
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
//對象里面的value為函數的
john.sayHi = func //里面的this指向該對象
john.sayHi() //輸出"John: hi!"
3.
func()
function func() {
alert(this)
} //[Object Window],this在全局作用域中找到了window
4.
document.addEventListener('click', function(e){
console.log(this); //#document；給某對象添加事件時
//this指向該對象
setTimeout(function(){
console.log(this); //Window；setTimeout中無特殊指明
}, 200); //this指向Window
}, false);
5.
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) //John；call方法把this改成了john
6.
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指$btn
this.showMsg(); //想調用module下的showMsg，調用不到
})
},
showMsg: function(){
console.log('饑人谷');
}
}
<--------------------------------------------->
修改后
var module= {
bind: function(){
var _this = this //把指向module的this保存一下
$btn.on('click', function(){
console.log(this)
_this.showMsg();
})
},
showMsg: function(){
console.log('饑人谷');
}
}
原型鏈：
1.
function Person(name){
this.name = name; //構造函數Person中this指向實例p
} //p.name = "若愚"
Person.prototype.sayName = function(){
//Person.prototype.constructor === Person
//p.__proto__ === Person.prototype
//p.__proto__.sayName === Person.prototype.sayName
//無特殊指明，原型中的methods被實例調用時this都指向該實例
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName(); //'My name is :若愚'
2.
Paste_Image.png
原型鏈大概定義：
根據javascript中的萬物皆對象。每個對象都有一個內部鏈接到另一個對象，稱為它的原型 prototype。該原型對象有自己的原型，直到達到一個以null為原型的對象。根據定義，null沒有原型，并且作為這個原型鏈 prototype chain中的最終鏈接。
3.
var strObj = {},
key,
max = 0,
maxkey
String.prototype.getMostOften = function () {
for(var i=0; i<this.length; i++){
key = this[i]
if(!strObj[key]){
strObj[key] = 1
}else{
strObj[key]++
}
}
for( key in strObj){
if(strObj[key] > max){
max = strObj[key]
maxkey = key
}
}
return '頻率最高的字符為' + maxkey + ',因為出現了' + max +'次'
}
str = new String()
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //頻率最高的字符為d,因為出現了5次
4.
instanceOf:判斷一個對象是不是某個類型的實例
var Obj = [1,2,3]
function fn(obj, F){
switch (F) {
case obj.__proto__.constructor:
console.log(true);
break;
case obj.__proto__.__proto__.constructor:
console.log(true);
break;
default:
console.log(false);
break;
}
}
new Object()
fn(Obj, Object) //true
繼承：
1.繼承的作用：
當我們在一個類中添加屬性和方法時，發現其他類中有該屬性和方法，這時候我們就需要用到原型鏈的繼承，把其他類中的屬性和方法繼承過來
2.
//方法1
function People(name, sex){
this.name = name;
this.sex = sex;
this.printName = function(){
console.log(this.name);
}
}
var p1 = new People('饑人谷', 2)
將printName方法放在了People的執行上下文里，只能通過p1.printName()調用這個方法
<------------------------------------->
//方法2
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
}
var p1 = new Person('若愚', 27);
一般會把方法放在類的prototype，這樣可以獲得這個方法，又能調用
3.Object.create 有什么作用？兼容性如何？
我們可以通過Object.create來clone一個新的prototype而不是直接把Person.prtotype直接賦值給Male.prototype,來使子類獲得父類的方法
ECMAScript 5兼容
Male.prototype = Object.create(Person.prototype);
4. hasOwnProperty有什么作用？ 如何使用？
判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
};
function Male(name, sex, age){
Person.call(this, name, sex);
this.age = age;
}
inherit(Person, Male);
Male.prototype.printAge = function(){
console.log(this.age);
};
var m = new Male('Byron', 'm', 26);
m.printName();
m.hasOwnProperty('name'); // true
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true
5.
call的作用
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex);//繼承Person中的name和sex屬性
this.age = age;
}
6.
實現繼承
function Person(name, sex){
this.name = name
this.sex = sex
}
Person.prototype.getName = function(){
console.log(this.name)
};
function Male(name, sex, age){
Person.bind(this)(name, sex)
this.age = age
}
function inherit(classA, ClassB){
classB.prototype = Object.create(classA.prototype)
classB.prototype.constructor = classB
}
inherit(Person, Male)
Male.prototype.getAge = function(){
console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
