一、全局作用域中的this
es5与es6中严格模式与非严格模式全局函数的this都指向window
function demo1 () {
console.log(this);//window
}
demo1();
function demo2 () {
'use strict';
console.log(this);//window
}
demo2();
二、全局作用域中函数中的this
es5，非严格模式this指向window，严格模式this指向undefined；es6箭头函数的this都指向window(始终指向上下文)
function demo1 () {
console.log(this);//window
}
demo1();
function demo2 () {
'use strict';
console.log(this);//undefine
}
demo2();
let demo4 = () => {
console.log(this);
}
demo4();
let demo5 = () => {
'use strict'
console.log(this);
}
demo5();
三、 对象的函数（方法）中的this
es5，不管是严格模式还是非严格模式，this的指向都是调用这个函数的对象；es6的this则是执行该对象所处的执行上下文（执行环境）
//对象中函数this的指向
var obj1 = {
name: 'obj1',
fun: function () {
//obj1
console.log(this);
}
}
obj1.fun();
//严格模式
var obj2 = {
name: 'obj2',
fun: function () {
'use strict';
console.log(this);
}
}
obj2.fun();
var obj3 = {
name: 'obj3',
fun: () => {
console.log(this);
}
}
obj3.fun();
//严格模式
var obj4 = {
name: 'obj4',
fun: () => {
'use strict';
console.log(this);
}
}
obj4.fun();
var obj5 = {
name: 'obj5',
fun () {
console.log(this);
}
}
obj5.fun();
var obj6 = {
name: 'obj6',
fun () {
'use strict'
console.log(this);
}
}
obj6.fun();
//函数内部 tthis指向
//es5 非严格模式
function fun1 () {
var obj = {
name: 'fun1',
fun: function () {
console.log(this);
}
}
obj.fun();
}
fun1();
//es5 严格模式
function fun2 () {
var obj = {
name: 'fun2',
fun: function () {
'use strict';
console.log (this);
}
}
obj.fun();
}
fun2();
//es6 非严格
function fun3 () {
var obj = {
name: 'fun3',
fun: () => {
console.log(this);
}
};
obj.fun();
}
fun3();
//es6 严格模式
function fun4 () {
var obj = {
name: 'fun4',
fun: () => {
'use strict'
console.log(this);
}
}
obj.fun();
}
fun4();
function fun5 () {
var obj = {
name: 'fun5',
fun () {
console.log(this);
}
}
obj.fun();
}
fun5();
function fun6 () {
var obj = {
name: 'fun6',
fun () {
'use strict'
console.log(this);
}
}
obj.fun();
}
fun6();
四、构造函数的this
在严格模式下，构造函数中的this指向构造函数创建的对象实例。
// 'use strict';
console.log('严格模式');
console.log('构造函数中this指向');
function Test () {
this.a = 'a'
this.fun = function () {
console.log(this.b);
return this.a;
}
}
var test1 = new Test();
test1.b = 'b';
console.log(test1.fun());
function Test2 () {
this.a = 'aa'
this.fun = () => {
'use strict';
console.log(this.b);
return this.a;
}
}
var test2 = new Test2();
test2.b = 'bb';
console.log(test2.fun());
五、事件处理函数中的this
在严格模式下，在事件处理函数中，this指向触发事件的目标对象。
六、内联事件处理函数中的this
在严格模式下，在内联事件处理函数中，有以下两种情况：
Demo实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>this指向测试</title>
<script>
function demo1() {
console.log(this);//window
}
demo1();
function demo2() {
'use strict';
console.log(this);//undefine
}
demo2();
let demo4 = () => {
console.log(this);
}
demo4();
let demo5 = () => {
'use strict'
console.log(this);
}
demo5();
//对象中函数this的指向
var obj1 = {
name: 'obj1',
fun: function () {
//obj1
console.log(this);
}
}
obj1.fun();
//严格模式
var obj2 = {
name: 'obj2',
fun: function () {
'use strict';
console.log(this);
}
}
obj2.fun();
var obj3 = {
name: 'obj3',
fun: () => {
console.log(this);
}
}
obj3.fun();
//严格模式
var obj4 = {
name: 'obj4',
fun: () => {
'use strict';
console.log(this);
}
}
obj4.fun();
var obj5 = {
name: 'obj5',
fun() {
console.log(this);
}
}
obj5.fun();
var obj6 = {
name: 'obj6',
fun() {
'use strict'
console.log(this);
}
}
obj6.fun();
//函数内部 tthis指向
//es5 非严格模式
function fun1() {
var obj = {
name: 'fun1',
fun: function () {
console.log(this);
}
}
obj.fun();
}
fun1();
//es5 严格模式
function fun2() {
var obj = {
name: 'fun2',
fun: function () {
'use strict';
console.log(this);
}
}
obj.fun();
}
fun2();
//es6 非严格
function fun3() {
var obj = {
name: 'fun3',
fun: () => {
console.log(this);
}
};
obj.fun();
}
fun3();
//es6 严格模式
function fun4() {
var obj = {
name: 'fun4',
fun: () => {
'use strict'
console.log(this);
}
}
obj.fun();
}
fun4();
function fun5() {
var obj = {
name: 'fun5',
fun() {
console.log(this);
}
}
obj.fun();
}
fun5();
function fun6() {
var obj = {
name: 'fun6',
fun() {
'use strict'
console.log(this);
}
}
obj.fun();
}
fun6();
</script>
</head>
<body>
</body>
</html>
网友评论