天道酬勤,地道酬精,人道酬善,商道酬诚,业道酬精。
js 中的 this 真是让人又爱又恨,但在 js 的学习中this又是至关重要的,下面分享一些关于我对 js 中this 的理解,能力有限,水平一般,不足之处,多多包涵。
this 学习首先要记住的一点,关于 this 的指向,在函数声明时是看不出来的,只有在函数调用时才能确定 this 指向。
关于 this 使用我总结了以下几点:
1.如果 this 出现在一个普通的函数中,函数中的 this 就表示 window,如果通过 window 打点调用一个函数,这个函数中 this 也表示 window 。
function f() {
console.log(this); // window
}
f(); //普通函数调用
function f(){
var user = "ange997";
console.log(this.user); //undefined
console.log(this); //Window
}
f(); //普通函数调用
function k() {
console.log(this); // window
}
window.k(); // window打点调用
k(); // 程序员自己调用
2.事件绑定,事件处理程序,事件发生时,浏览器帮我们调用这个函数,此函数中的this表示事件源
let box = document.getElementById("box");
box.onclick = function (){
console.log(this); //this表示事件源
}
let box = document.getElementById("box");
function f(){
console.log(this); //window
return function g(){
console.log(this) //事件源
}
}
box.onclick = f();
let btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++){
btns[i].index= i;
btns[i].onclick = function (){
console.log(this.index)
}
}
调用函数就会产生一个执行上下文,在绑定事件中,调用函数和函数中的this都被绑定到一个事件中,只用执行这个事件的时候,才会执行这个函数,函数中的,this就是这个事件源,关键在于是谁调用了这个函数,是调用this就是谁。
3.函数方法调用,在一个对象中,如果有方法(函数),如果通过这个对象调用方法,方法中的this表示这个对象。
var wc = {
name : "wangcai", // 属性
age : 100,
eat : function (){ // 方法(属性)
console.log("eat......");
console.log(this.age);
}
}
// 一个方法中的this是谁,就看点前面是谁。
wc.eat(); // 调用一个对象上的方法
function f(){
console.log(this);
}
f(); //普通函数调用
let obj = {};
obj.g = f;
obj.g(); //函数方法调用
4.IIFE立即执行函数,this表示window
(function () {
console.log(this);
})();
// 在非严格模式下,IIFE中的this表示window
5.严格模式,前四点都在非严格模式下,在严格模式下,调用一个普通函数, this表示undefined,IIFE中的this也表示undefined。
"use strict"; // 启用JS的严格模式
function f() {
console.log(this); // undefined
}
f();
(function () {
console.log(this); // undefined
})();
最后分享几个例题:
function f() {
console.log(this.name);
}
let box = document.getElementById("box");
box.name = "mybox";
var name = "mywindow";
var obj = {
name:"myobj",
f:f
}
f(); // mywindow
box.onclick = f; // 点击得到mybox
obj.f(); // myobj
box.onmousedown = function () {
f(); // 普通函数调用
}
var num = 10; // VO ---》 num也变成了65
var obj = {
num:20, // num:30
}
obj.fn = (function (num) {
// EC num:20 --》 21 --》 22 --》 23
this.num = num*3; // window.num = 60 --》65
num++; //
console.log(num)
return function (n) {
// EC n:5
// EC n:10
this.num += n; //
num++;
console.log(num) // 22 23
}
})(obj.num)
var fn = obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num)
console.log(window.num)
(function () {
var a = 1;
var obj = {
a:10, // 要使用这个a 必须是obj.a
f:function () {
a *= 2;
}
}
obj.f();
alert(obj.a+a)
})();
window.a = 1;
var obj = {
a:10,
f:function () {
this.a *= 2;
console.log(this.a)
}
}
obj.f();
var name = "window";
var Wangcai = {
name:"Wangcai",
show:function () {
console.log(this.name)
},
f:function () {
var fun = this.show;
fun(); // 普通函数调用
}
}
Wangcai.f();
var fullname = "language";
var obj = {
fullname:"javascript",
prop:{
getFullName:function () {
return this.fullname;
}
}
}
// 谁用了getFullName 看.前面是谁
//.前面是obj.prop 说明getFullName中的this是obj.prop
//访问一个对象上不存在的属性 得到undefined
console.log(obj.prop.getFullName()); // undefined
本次整理略显粗糙,不足之处还请见谅。