<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this运用</title>
<script type="text/javascript">
//js 的指向:即目标方向、所对的方位
/*
* this是什么?其实它本身是一种指向。
* this指向可以分为以下几种情况
* !!普通调用,this指向调用者
* !!call/apply 调用,this指向当前thisArg参数
* !!箭头函数,this指向为当前函数的this指向
*
* */
//1.普通调用
//通俗的讲:就是谁调用,则this便指向谁。
//这里又大致分为几种情况
/*
* 1.1对象方法的调用
* 即某方法为某对象上的一个属性的属性,正常情况当该方法被调用的时候,this的指向则是挂载该方法的对象。
*
* */
var obj = {
a:'this is obj',
test:function(){
console.log(this.a);
}
}
obj.test();
//打印出 this is obj
/*
* 1.2“单纯” 函数调用
* 即该函数为自己独立的函数,而不是挂载到对象上的属性(window除外),也不会被当成构造函数来使用,而仅仅是当函数来使用,此时的this指向则是window对象。
* */
var a = "this is window";
function test(){
console.log(this.a);
}
test();//打印出this is window
//上面的代码等同于
window.a = 'this a window';
window.test = function test(){
console.log(this.a);
//此时是window为调用者,即this会指向window
}
window.test();
/*
* 1.3 构造函数调用
* 即该函数被当成构造函数来调用,此时的this指向该构造函数的实例对象。我们来看一个例子,属于第二种情况的例子
*
* */
function test(){
this.a = 'this a test001';
console.log(this.a);
console.log(this);
}
test();
//分别打印出:
//this is test001
//Window {}
//此时的this的确指向window对象 ,但是换种形式,将其换成构造函数来调用,结果会如何
function Test(){
this.a = 'this is test002';
console.log(this.a);
console.log(this);
}
var test2 = new Test();
//分别打印出:
//this is test002
//Test{a:'this is test002'}
//此时的this的确指向了该构造函数的实例对象
</script>
</head>
<body>
</body>
</html>
运行结果如图片所示:
文章参照于:https://zhuanlan.zhihu.com/p/28058983?ref=myread
后面的会持续更新。。O(∩_∩)O哈哈哈~