this:
1. apply、call 不铆、bind有什么作用甲棍,什么區(qū)別
共同作用:通過傳入?yún)?shù)都可以改變this的值
區(qū)別:
bind調(diào)用時會生成一個新函數(shù)
var fn1 = obj.fn.bind(obj) //原來window下調(diào)用的fn1(this-->window)
fn1() //變成你希望調(diào)用的obj(this-->obj)
直接調(diào)用這個函數(shù)時迟螺,加上call和apply之后,就可以傳入你希望傳入的函數(shù)執(zhí)行上下文和參數(shù)
fn.call(context, a , b, c)
fn.apply(context, [a, b, c])
不同的是call直接接受參數(shù)傳入荆萤,apply接受參數(shù)列表傳入
下面有一個實例:
傳入函數(shù)調(diào)用時生成的arguments(沒有數(shù)組方法)生成我們需要的字符串的拼接
function joinStr(){
var join = Array.prototype.join.bind(arguments, '-')
return join('') //生成一個新函數(shù)镊靴,返回'a-b-c'
}
joinStr('a', 'b', 'c')
<--------------------------------------------->
function joinStr(){
//Array.prototype可以換成數(shù)組的一個實例[]
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為函數(shù)的
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(); //想調(diào)用module下的showMsg算行,調(diào)用不到
})
},
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; //構(gòu)造函數(shù)Person中this指向?qū)嵗齪
} //p.name = "若愚"
Person.prototype.sayName = function(){
//Person.prototype.constructor === Person
//p.__proto__ === Person.prototype
//p.__proto__.sayName === Person.prototype.sayName
//無特殊指明,原型中的methods被實例調(diào)用時this都指向該實例
console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName(); //'My name is :若愚'
2.
原型鏈大概定義:
根據(jù)javascript中的萬物皆對象苫耸。每個對象都有一個內(nèi)部鏈接到另一個對象州邢,稱為它的原型 prototype。該原型對象有自己的原型褪子,直到達(dá)到一個以null為原型的對象量淌。根據(jù)定義,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 + ',因為出現(xiàn)了' + max +'次'
}
str = new String()
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //頻率最高的字符為d,因為出現(xiàn)了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.繼承的作用:
當(dāng)我們在一個類中添加屬性和方法時,發(fā)現(xiàn)其他類中有該屬性和方法笼痛,這時候我們就需要用到原型鏈的繼承裙秋,把其他類中的屬性和方法繼承過來
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的執(zhí)行上下文里,只能通過p1.printName()調(diào)用這個方法
<------------------------------------->
//方法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缨伊,這樣可以獲得這個方法摘刑,又能調(diào)用
3.Object.create 有什么作用?兼容性如何刻坊?
我們可以通過Object.create來clone一個新的prototype而不是直接把Person.prtotype直接賦值給Male.prototype,來使子類獲得父類的方法
ECMAScript 5兼容
Male.prototype = Object.create(Person.prototype);
4. hasOwnProperty有什么作用枷恕? 如何使用?
判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性谭胚,hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數(shù)
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.
實現(xiàn)繼承
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();