面向对象关于函数以及this的问题
函数在js中扮演的角色
1、普通函数
function foo(){
console.log(1);
}
foo();
2、构造函数
function Foo(){
this.day=function(){
console.log(2);
}
}
var foo1=new Foo();
foo1.day();
3、作为对象
foo.abc=3;
console.log(foo.abc);
函数产生方式
1、内置函数
2、自定义函数（有三种）
（1）函数声明（可以先调用后声明）
f1();
function f1(){
console.log(1);
}
(2)函数表达式
var f2=function (){
console.log(1);
};
f2();
(3)new Function()一般用不到
var f3=new Function('console.log(1);');
f3();
函数的调用方法
1、构造函数实例化
function Foo(name){
this.name=name;
}
var foo2=new Foo('lisi');
console.log(foo2.name);
2、普通函数调用
function foo(){
console.log(1);
}
foo();
3、对象方法调用
var obj={};
obj.show=function(){
console.log(1);
}
obj.show();
4、call和apply方法
var a=1;
var b=2;
function foo(n){
console.log(this.a+this.b+n);
}
foo(3);
foo.call({a:3,b:4},5);
foo.apply({a:6,b:7},[8]);
5、函数的立即调用
(function (){console.log(1);})();
(function(){console.log(1);}());
call以及apply的用法
1、调用函数
function foo(n){
console.log(n);
}
foo(1);
foo.call(null,2);
foo.apply(null,[3]);
2、改变所调用的函数的内部的this值的指向
var a=1;
function foo(b){
console.log(this.a+b);
}
foo(2);
foo.call({a:3},4);
foo.apply({a:5},[6]);
3、借用其他对象的方法
var arr=[12,34,6,32,12,43];
var ret=Math.max.apply(null,arr);
console.log(ret);
4、把类数组转换成数组
var obj={0:'1',1:'2',length:2};
var ret=[].slice.call(obj);
console.log(ret);
我们常见的类数组
1、document.getElementsByTagName('');
2、jQuery的实例的本质就是类数组
3、arguments本质就是类数组.注意：arguments包括的是所有实参
function fr(a,b,c){
console.log(arguments);
}
fr(1,23,4,5,6);
高阶函数
1、作为参数的函数(回调函数)
function foo(param){
var str='{"username":"lisi","age":"12"}';
param.change(str);
}
foo({
abc:123,
change:function(data){
data=JSON.parse(data);
console.log(data.username);
}
})
2、作为返回值的函数(闭包)
var fn=(function(){
return function(){
console.log(1);
}
})();
fn();
3、关于高阶函数自动排序的案例
var data = [{
name : 'tom',
age : 12,
price : 30
},{
name : 'jerry',
age : 15,
price : 30
},{
name : 'spike',
age : 19,
price : 80
},{
name : 'kitty',
age : 10,
price : 10
},{
name : 'tiger',
age : 13,
price :50
}];
function sortRuler(sortFlag){
return function (o1,o2){
var v1=o1[sortFlag];
var v2=o2[sortFlag];
if(v1>v2){
return 1;
}else if(v1<v2){
return -1;
}else {
return 0;
}
};
};
var st=sortRuler('age');
data.sort(st);
console.log(data);
关于this的问题
关于this：this到底指向谁取决于函数调用的方式
this出现的场景
1、普通函数当中的this(在非严格模式下this指的是window，但是在严格模式下this的值是undefined)
严格模式：对语法规则要求更加严格("use strict")
function foo(){
"use strict"
console.log(this);
}
foo();
2、构造函数中的this以及原型中的this
构造函数中的this与原型方法中的this指向相同，都是指向实例对象
function Student(name,age){
this.name=name;
this.age=age;
}
Student.prototype.stu=function(){
console.log(this.name);
};
var ste=new Student('isi','12');
console.log(ste.name);
ste.stu();
3、实例对象中的this
对象方法中的this就是方法的调用者
var obj={
info:'hello',
showInfo:function(){
console.log(this.info);
}
};
obj.showInfo();
4、定时函数中的this
定时函数中的this就是window
setInterval(function(){
console.log(this);
}, 100);
5、事件函数中的this
这里的this是指绑定事件的对象(这里的btn是一个按钮的id)
onload=function(){
var btn=document.getElementById('btn');
btn.onclick=function(){
console.log(this);
}
};
何时需要缓存this？
当this 的指向发生改变的时候(这里的btnId是一个按钮的id，这里的dvId是一个div的id)
onload=function(){
function ChangeColor(btnId,dvId){
this.btn=document.getElementById(btnId);
this.dv=document.getElementById(dvId);
}
ChangeColor.prototype.change=function(){
var that=this;
this.btn.onclick=function(){
that.dv.style.backgroundColor='blue';
};
};
var cha=new ChangeColor("btn","dv");
cha.change();
};
关于html代码
<div id="dv" style="height:100px;width:100px"></div>
<input type="button" value="按钮" id="btn">
