js中this 的使用
1、当this出现在事件处理函数中
box.onclick = function(){
console.log( this ); // 事件处理函数中的 this, 该事件由谁触发,this指的就是谁
}
2、this出现在div中的两个不同点
<div id="box" onclick="console.log( this )" >div</div> 这里的this指代div
<!-- <div id="box" onclick="( (function(){console.log( this )})() )" >div</div> 这里的this指代window对象
3、node 中this console.log(this===module.exports)
4、use strict 中
function fn(){
"use strict"
console.log(this);
}
fn();//undefined
window.fn();//window
5、call函数
function fn(m,n){
console.log( this.a,m,n );
}
fn.call({a:''},2,3 );
// 函数.call 会直接调用该函数.
// 并且call 的 第 0个参数就是 函数执行时候的this
// 后面的参数是 函数执行的时候的参数
6、bind
function fn(){
console.log( this.a )
}
var fn1 = fn.bind( {a: 2} );
fn();//原函数的this.a依旧是undefined
fn1();//此时改变了this指向
bind 返回一个新函数,且只能绑定一次
apply:可以使用其他函数的this
call后面的参数与方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和方法中一一对应的,这就是两者最大的区别。
7、箭头函数
var a = 1;
var obj = {
a:2,
fn1: ()=>{
alert( this.a )
alert( this )//window
},
fn2: function(){
alert( this.a )
alert( this )//obj
}
}
// obj.fn1();//1
bind call不能改变箭头函数的内部指向
var fn = ()=>{
alert(this)
}
var fn1 = fn.bind({})
fn1();//window
8、对象内箭头函数
var a = 1;
var obj = {
a:2,
fn1: ()=>{
alert( this.a )
},
fn2: function(){
alert( this.a )
}
}
// obj.fn1();//window
obj.fn2();//谁调用this指向谁,省略了window.
9、对象内返回箭头函数
var obj = {
a: 2,
fn: function(){
alert( this.a )
}
}
// obj.fn();//2
obj.fn.bind({a: "momo"})();//改变指向为bind里面的a
--------------------------------------
var a = 1;
var obj = {
a: 2,
o: {
a: 3,
fn:function(){
return function(){
alert(this)
}
}
}
};
window.obj.o.fn();
var temp = obj.o.fn();
window.temp()//window
10、在构造函数中应用
function Fn(){
this.a = 10;
// return 1; //这里直接返回FN{a:10}
return {a:1,b:3}; //返回非 null 的对象,那么实例化结果就是返回出的对象,或者说return是暴露你想要暴露的东西
}
var f = new Fn();
console.log( f );
set get
var obj = {
n: 1,
m: 2,
get sum(){
console.log( "get sum..." )
// return 2
return this.n+this.m
},
set sum(val){
console.log( "set sum..." );
this.n = val/2;
this.m = val/2;
}
}
console.log( obj.get )//obj的set get 中 的this是obj
这是当初学this的时候写的,以上就是一些最简单的this的应用,希望对初学this的人能够有一些帮助