this 就是一个指针,指向调用函数的对象。
在javascript中,this 的值不是固定不变的,而是由运行时的环境决定的,在不同的环境中,this指代的值也不同。
在方法中,this 指向的是调用这个方法的对象。
let stu = { name: "Jake", sex : "male", age : 15, sayInfo : function() { return this.name + " " + this.sex; } }; console.log(stu.sayInfo()); 运行结果: Jake male在这个方法中,this 指向的是 stu 对象。
全局环境中使用 this 时,this 指向 window 全局对象。
console.log(window === this); let name = "jfghd"; console.log(window.name); this.sname = "bhgj"; console.log(window.sname); console.log(sname); 运行结果: true kj bhgj bhgj1)默认情况下: 在函数中,默认情况下,this 指向全局对象。
function myFun(str){ this.name = str; } myFun("jkl"); console.log(name); 运行结果: jkl2)严格模式下: 在函数中,严格模式下,函数没有被绑定到 this 上,这时候,this 是 undefined。
"use strict"; function myFun(){ return this; } console.log(myFun()); 运行结果: undefined在HTML 事件中,this 指向接收事件的 HTML 元素。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="this.style.background='red'">点击变色</button> </body> </html>运行效果: 这个例子中,click事件是 button 接收的,this 指向按钮元素。
在对象方法中,this 指向的是该对象。
let obj = { firstName : "John", lastName : "Doe", age : 16, myFunc : function() { return this; } }; console.log(obj.myFunc()); 运行结果: {firstName: "John", lastName: "Doe", age: 16, myFunc: ƒ}在这个例子中, this 是在对象方法中,this 指向的是 obj 这个对象。
let stu = { firstName: "Jake", lastName : "Joson", age : 16, stuName : function() { return this.firstName + " " + this.lastName; } }; console.log(stu.stuName()); 运行结果: Jake Joson调用对象中的方法,this 指向 stu 对象。
当在对象上面使用了函数对象方法 apply 和 call 时,则会改变 this 的指向,在上面这个例子中,调用 stu1.fullName. 方法,传入参数 stu2 时,this 本来应该是指向 stu1 ,结果却指向了 stu2,这是因为显示函数绑定的作用。
当通过 new 调用函数时,函数被当作一个构造函数,this 指向构造函数创建的对象;
function myFun(){ this.name = "ghfo"; } let obj = new myFun(); console.log(obj.name); 运行结果: ghfo在内部函数中,this 指向全局对象 window。
var name = "kj"; let obj = { name : "John", myFunc : function() { var test = function(){ console.log(this.name); } test(); } }; obj.myFunc(); 运行结果: kj但是,在内部函数中,如果将 this 作为变量保存下来,则 this 指向该对象。
var name = "kj"; let obj = { name : "John", myFunc : function() { var sfj = this; var test = function(){ console.log(sfj.name); } test(); } }; obj.myFunc(); 运行结果: John