== JS-3-this指向的问题 ==

 

 

 

== JS-3-this指向的问题 ==

this的指向 :
指向当前的调用者
指向调用当前方法的那个对象


--- * --- * --- * --- * --- * --- * --- * --- * --- * --- * ---


alert(this); -> object window
相当于: window.alert(this);
调用者是: window

function fn(){ alert(this); } fn();
-> object windows
相当于: window.fn();
调用者是: window

obj调用
HTML: <input type='button' id='btn' value='alert this'>
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
alert(this+' id:'+this.id);
}
-> object HTMLInputElements id: btn
调用者是: oBtn


--- * --- * --- * --- * --- * --- * --- * --- * --- * --- * ---


function fn(){
alert(this);
}

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
fn();
}

//此时点击会弹出: window object


--- * --- * --- * --- * --- * --- * --- * --- * --- * --- * ---


<input type="button" onclick="alert(this+' id:'+this.id);" id='btn2' value='alertThis'>

行间样式 -> object HTMLInputElements id: btn2



<input type="button" onclick="fn();" id='btn3' value='alertThis3'>

行间样式 -> 此时点击会弹出: window object


--- * --- * --- * --- * --- * --- * --- * --- * --- * --- * ---

···对作用域 '当前' 的界定···


function fn(){ alert(this); }

fn(); -> this是 window
oDiv.onclick = fn; -> this 是 oDiv

oDiv.onclick = function(){
alert(this); -> this 指向的 oDiv
fn(); -> 这时候 函数fn()中的this 指向 window
}

<div onclick="alert(this);"></div> // 此时this指向当前点击的div
<div onclick="fn();"></div> // 此时fn()函数中的this指向 window


--- * 第一种方式 ---

<body>

<button class="btn">按钮 1</button>
<button class="btn">按钮 2</button>
<button class="btn">按钮 3</button>
<button class="btn">按钮 4</button>
<button class="btn">按钮 5</button>

</body>
<script>

var aBtn = document.getElementsByClassName('btn');
var that = null;

for(var i=0; i<aBtn.length; i++){
aBtn[i].onclick = function(){
// this.style.background="yellow";
var that = this;
chColor(that);
}
}

function chColor(that){
that.style.background='yellow';
}

</script>

 

--- * 第二种方式 ---

<body>

<button class="btn">button 按钮 </button>
<button class="btn">button 按钮 </button>
<button class="btn">button 按钮 </button>
<button class="btn">button 按钮 </button>

</body>
<script>

var aBtn = document.getElementsByClassName('btn');

for( var i=0; i<aBtn.length; i++){
aBtn[i].onclick = fn1;
}

function fn1(){
this.style.background='yellow';
}

</script>

 

 

 

posted @ 2018-08-03 14:19  silvercell  阅读(864)  评论(0)    收藏  举报