JavaScript的"this"

最近在读Programming Languages Pragmatics的时候又看到了这个,虽然似乎不是什么值得提的事,为了避免忘记还是记下来。

JavaScript里的this就是被调用对象的引用。形象的说,就是那"."之前的那个对象的引用。
JavaScript里虽然有函数(类型),也有函数(对象),但在调用的时候总是跟某个对象绑定在一起来调用的。直接调用一个看似没有跟什么对象绑定的函数,实际上是跟"全局"对象绑定在一起了。在浏览器DOM里这个全局对象就是window。
当使用new运算符来构造新对象时,new之后跟着的那个构造器里的"this"指向的就是由new而构造出来的一个空的新对象。这个对象里暂时什么都还没有(有是有,不过DontEnum看不到罢了),而构造器里的this.xxx形式的赋值就能够创建给那个对象新的属性。

说到底,JavaScript里的“对象”不过就是关联数组罢了。按Concepts of Programming Languages一书里的讲法,JavaScript里的对象与perl里的hash是很像的。现下流行的JSON也正是利用了这个特性而发展出来的。

可以看看下面这段代码:
<script>
function fooConstructor() {
this.variable = 1;
}

function makeAnonymousFunction() {
return function() {
this.gooValue = 2;
};
}

fooConstructor(); // invoke a function that looks like a constructor
makeAnonymousFunction()(); // invoke an anonymous function
document.write(variable + "<br />");
document.write(window.gooValue + "<br />");

var obj = new fooConstructor(); // invoke a constructor with "new"
document.write(obj.variable + "<br />");
</script>
<!-- displays:
1
2
1
-->


虽然我们在第一次调用fooConstructor()时并没有以"object.method()"的形式来调用,它实际上等价于window.fooConstructor()。于是我们把window对象(浏览器DOM里的"全局"对象)隐式传给了所调用的函数,在fooConstructor里this就指向了window,并为window对象创建了variable属性,赋值为1。

makeAnonymousFunction()()的调用是为了演示这个this的指向与嵌套层次的无关性。makeAnonymousFunction()返回了一个函数对象,不过我们没有为这个对象给予一个名字,而是直接调用了它。与前一例一样,这个调用为window对象创建了一个名为gooValue的属性,并赋值为2。

然后我们演示了以new运算符来创建新对象的状况。这个很普通没什么需要解释的了~
### JavaScript 中 `this` 关键字的用法与行为 在 JavaScript 中,`this` 是一个特殊的关键字,用于指代函数执行时所在的上下文对象。它的具体指向取决于调用方式以及代码运行环境。 #### 函数内的 `this` 当在一个普通的函数内部访问 `this` 时,在非严格模式下它通常指向全局对象(浏览器中的 `window` 对象),而在严格模式下则会返回 `undefined`[^4]。 ```javascript function testFunction() { console.log(this); } testFunction(); // 非严格模式下输出 window;严格模式下输出 undefined ``` #### 方法中的 `this` 如果一个函数作为某个对象的方法被调用,则该方法里的 `this` 将自动绑定到这个特定的对象上[^5]。 ```javascript const obj = { name: 'Example', greet: function () { console.log(`Hello from ${this.name}`); } }; obj.greet(); // 输出 Hello from Example ``` #### 构造器中的 `this` 当通过 new 运算符创建实例的时候,构造器里面的 `this` 被设置成新生成的那个实例[^6]。 ```javascript function Person(name) { this.name = name; } const personInstance = new Person('John Doe'); console.log(personInstance.name); // John Doe ``` #### 箭头函数中的 `this` 箭头函数不定义自己的 `this` 值,而是捕获其所在词法作用域链上的最近一层非箭头函数的作用域下的 `this` 值[^7]。 ```javascript const objectWithArrowFunc = { name: 'Lexical This', logNameArrow: (() => console.log(this)) }; objectWithArrowFunc.logNameArrow(); // 可能输出 global/window 或者 undefined 如果是在模块环境中 ``` #### 使用 bind/call/apply 改变 `this` 的指向 开发者可以利用 `.bind()`、`.call()` 和 `.apply()` 明确指定某次调用期间使用的 `this` 引用[^8]。 ```javascript let user = { firstName:"Alice", lastName : "Smith"}; function getFullName(title){ return `${title} ${this.firstName} ${this.lastName}`; } getFullName.call(user,"Ms."); // Ms. Alice Smith ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值