// 例子1 默认绑定
console.log("----例子1----");
function a() {
function b() {
console.log(this);
function c() {
// 严格模式下 调用函数的时候不会默认绑定全局
"use strict";
console.log(this);
}
c();
}
// 此处等同于window.b() 因为默认绑定全局,没有显示的指明谁在调用b()
// 在node环境中为node global对象 ,window环境下为window对象
b();
}
// 跟b()同理
a();
// 例子2 隐式绑定
// es5 function this指向,默认指向调用者,即谁调用我 我指向谁
console.log("----例子2----");
// 注意此处的全局声明使用var而不是let/const.
// es6规定let/const声明的变量不会默认挂载到window下
// 可以尝试修改为let 会发现全局的name为undefined
// let name = '全局小白'
var name = "全局小白";
function special() {
console.log(this.name);
}
function immediate(callback) {
callback();
}
let girl = {
name: "小红",
detail: function () {
console.log(this.name);
// console.log(this)
},
woman: {
name: "小白",
detail: function () {
console.log(this.name);
},
},
special: special,
bibao: function () {
// 此处为闭包
return function () {
console.log(this.name);
};
},
test: function (param1, param2) {
console.log(param1, param2);
console.log(this.name);
},
};
let girl2 = {
name: "我是girl2",
};
let boy = girl.detail;
girl.detail(); // 小红
girl.woman.detail(); // 小白
girl.special(); // 小红 注意此处只是special属性引用了全局声明的special函数,最后还是谁调用指向谁
boy(); // 全局小白
girl.bibao()(); // 全局小白
immediate(girl.detail); // 全局小白
// call,bind,apply 显示绑定this
girl.test.call(girl2, 1, 2);
// bind会返回一个修改this后的函数,所以需要重新执行
girl.test.bind(girl2)(1, 2);
girl.test.apply(girl2, [1, 2]);
// 例子3
// 箭头函数this
// 默认指向全局(简单对象本身没有上下文)
// 如果被普通函数包裹则指向函数所在【父级上下文】
let mother = {
name: "小红",
detail: () => {
console.log(this.name);
},
test: function () {
let name = "我是内部小红";
return () => {
console.log(name); // 注意此处为原型链 箭头函数没有会继续往上寻找,找到外侧的name
console.log(this.name); // 此处因为被function包裹,而function本身是mother里的test属性,所以指向mother
};
},
};
mother.detail();
mother.test()();
// 箭头函数跟普通函数区别 ()=>{}
// 没有new 没有原型链 不能作为构造函数 默认是匿名函数
// 不可修改this,this在声明时已经确定
// call apply bind 可以用 , 但不会影响this指向
// 声明只能用函数表达式
javascript中this关键字
最新推荐文章于 2024-03-13 17:00:09 发布