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();
网友评论