js中变化莫测的this指向

最新推荐文章于 2020-06-17 16:17:20 发布

卍夏至

最新推荐文章于 2020-06-17 16:17:20 发布

阅读量149

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/eightNine1102/article/details/106613725

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

事件调用环境

谁触发事件，函数里面的this指向的就是谁

<style>
    .box1,.box2{
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        left: 0;
        transition: 1s;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
        let box1=document.querySelector(".box1")
        let box2=document.querySelector(".box2")
        box1.onclick=move;
        box2.onclick=move;
        function move(){
        	console.log(this)   //谁触发事件，函数里面的this指向的就是谁
            this.style.left="100px"
        }
    </script>
</body>

全局环境

浏览器环境指向window
node环境里指向module.exports

函数内部

this最终指向的是调用它的对象

//普通函数直接调用与windows调用
function move(){
	console.log(this)
}
move()   //Window
window.move()   //window

//对象中的函数直接调用与windows调用
var obj={
	a:3,
	b:function(){
		console.log(this)
	}
}
obj.b() //{a: 3, b: ƒ}
window.obj.b()  //{a: 3, b: ƒ}

函数被多个对象包含，如果函数被最外层对象调用，this指向的也只是它上一级的对象

//多层对象中的函数的this指向
var obj={
	a:3,
	b:{
		fn:function(){
			console.log(this)
		}
	}
}
obj.b.fn() //{fn: ƒ}
window.obj.b.fn()  //{fn: ƒ}

//对象中的函数被赋值给另一个变量
var obj={
	a:3,
	b:{
		fn:function(){
			console.log(this)
		}
	}
}
let ab=obj.b.fn
ab()    //window
let abc=obj.b
abc.fn()    //{fn: ƒ}

构造函数

构造函数中的this指向的是实例对象

function fn(){
	this.num=10
	console.log(this)   
}
var obj=new fn()    //fn {num: 10}
console.log(obj)    //fn {num: 10}
/*
*new关键字的作用
*1，调用函数
*2，自动创建一个对象
*3，把创建出来的对象和this绑定
*4，如果构造函数没有返回值，隐式返回this对象；如果返回对象this指向返回的对象
*/

function fn(){
	this.num=10
}
fn.num=20
fn.prototype.num=30
fn.prototype.method=function(){
	console.log(this)
	console.log(this.num)
}
var prototype=fn.prototype;
var method=prototype.method;
new fn().method();  //fn {num: 10}  10
prototype.method(); //{num: 30, method: ƒ, constructor: ƒ}  30
method();// windows undefined

箭头函数

箭头函数本身没有this和arguments的，在箭头函数中引用this实际上调用的是上一层作用域的this；
这里强调一下是上一层作用域，对象是不能形成独立的作用域的。

let box1=document.querySelector(".box1")
let box2=document.querySelector(".box2")
box1.onclick=move;
box2.onclick=move;
function move(){
	setTimeout(()=>{
		this.style.left="200px"
	},1000)
}
        
var obj={
	fn:()=>{
		console.log(this)
	}
}
obj.fn()    //window

修改this指向

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
        var box1=document.querySelector(".box1")
        var obj = {
            fn: function() {
                console.log(this)
            }
        }
        obj.fn()    //window
        obj.fn.call(box1)    //<div class="box1"></div>
        obj.fn.apply(box1)    //<div class="box1"></div>
        obj.fn.bind(box1)()    //<div class="box1"></div>
    </script>
</body>

卍夏至

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中变化莫测的this指向

事件调用环境谁触发事件，函数里面的this指向的就是谁<style> .box1,.box2{ width: 100px; height: 100px; background: red; position: relative; left: 0; transition: 1s; }</style><body> <div class="box1
复制链接

扫一扫

专栏目录