this對(duì)于很多新手玩家來說，是一個(gè)難點(diǎn)，而且在面試題中也會(huì)被this給虐成狗~下面就具體看看this到底有多6
- 記住this最終指向它的調(diào)用者(只有函數(shù)在調(diào)用了之后才會(huì)有this的存在)
規(guī)律一：函數(shù)用圓括號(hào)調(diào)用，函數(shù)上下文是window對(duì)象
function fun() {
var a=100;//局部變量不屬于任何對(duì)象的屬性誉碴，只是存放在內(nèi)存中的堆里
alert(this.a)
}
var a=200;
fun()//200
//結(jié)論：此時(shí)是window在調(diào)用fun函數(shù)轻要，相當(dāng)于window.fun(),window此時(shí)隱藏了而已
規(guī)律二：函數(shù)如果作為一個(gè)對(duì)象的方法椭懊，對(duì)象打點(diǎn)調(diào)用宇立，函數(shù)上下文就是這個(gè)對(duì)象
function fun() {
var a=888;
alert(this.a)
}
var obj={
"a":10,
"b":20,
"c":fun
}
obj.c();//10
規(guī)律三：函數(shù)是事件處理函數(shù)踪宠，函數(shù)的上下文就是觸發(fā)這個(gè)事件的對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
background:pink;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
function fun() {
this.style.background="red"http://this表示box，點(diǎn)擊box變紅
}
var box=document.getElementById("box");
box.onclick=fun;
</script>
</html>
此時(shí)如果有多個(gè)盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
background:pink;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
<script type="text/javascript">
function fun() {
this.style.background="red"http://此時(shí)this代表的是各自box,
}
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
box1.onclick=fun;
box2.onclick=fun;
box3.onclick=fun;
</script>
</html>
規(guī)律四：定/延時(shí)器調(diào)用函數(shù)妈嘹，this是window對(duì)象
function fun() {
console.log(this)
}
setInterval(fun,1000)
考考你：結(jié)合規(guī)律三
var box=document.getElementById("box");
box.onclick=function(){
//var self=this;如果想this不變柳琢，得用變量先存起來(sleft.style.background="red")
setTimeout(function(){
this.style.background="red"
},1000)
}
//結(jié)論：此時(shí)會(huì)報(bào)錯(cuò)，因?yàn)榇藭r(shí)的this是window
規(guī)律五：數(shù)組中存放的函數(shù)润脸，被數(shù)組索引調(diào)用柬脸，this就是這個(gè)數(shù)組
function fun(a,b,c,d,e,f){
alert(this.length)
}
var arr=[fun,"dd","cc"]//數(shù)組長度是3
var length=10;
arr[0]();//3
小測(cè)試：先自己思考，記下答案毙驯，我會(huì)把答案放在文末
1
function fn(){
alert(this.a)
}
var obj={
"a":1,
"b":2,
"c":[{
"a":3,
"b":4,
"c":fn
}]
}
var a=5;
obj.c[0].c()
2 :arguments見上篇
function fn(m,n,o,p,q,r){
alert(this.length)
}
function fun(a,b){
arguments[0](9,10,11,12,13)
}
fun(fn,5,6,7)
解釋一下arguments.callee
function fun(a,b,c,d,e,f){
console.log(arguments.callee===fun);//true,表示的是函數(shù)自身
console.log(arguments.callee.length);//6 表示函數(shù)自身倒堕，自身長度就是形參
console.log(arguments.length);//3 表示的是實(shí)參個(gè)數(shù)
}
fun(55,66,77)
call和apply的異同點(diǎn)
同：二者都是函數(shù)對(duì)象的方法，只能是函授打點(diǎn)調(diào)用~爆价，表示用指定的上下文執(zhí)行這個(gè)函數(shù)垦巴；
function fun(){
alert(this.age)
}
var obj = {
name:"xj",
age:"24",
like:"play"
}
fun() //undefined
fun.apply(obj) //24
fun.call(obj) //24
異：apply只接受數(shù)組，call只接受用逗號(hào)分割的參數(shù)
function fun(a,b,c){
alert(a+b+c)
}
var obj={
name:"xj",
age:24
}
fun.call(obj,6,7,8) //21
//fun.apply(obj,6,7,8) //報(bào)錯(cuò)
fun.apply(obj,[6,7,8])//21
應(yīng)用：
1铭段、求最大值:
Math.max(3,4,5,6)//6
2骤宣、求一個(gè)數(shù)組的最大值
Math.max.apply(window,[4,5,6,7,8])//8
》》》》》》》小測(cè)試答案《《《《《《《《
1、3 //結(jié)論：函數(shù)的最終調(diào)用者是對(duì)象c
2序愚、4 //結(jié)論：函數(shù)最終調(diào)用憔披。是arguments對(duì)象進(jìn)行方括號(hào)索引得到的這個(gè)函數(shù)，然后加圓括號(hào)調(diào)用了爸吮，所以符合規(guī)律2活逆，或者規(guī)律5；如果你認(rèn)為argument是對(duì)象拗胜，規(guī)律2生效，如果認(rèn)為argument為數(shù)組怒允，規(guī)律5生效埂软；所以無論如何：函數(shù)fn里面的函數(shù)是argument對(duì)象
