Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.
⭐ ⭐
A:
In object-oriented languages this represents a reference to the current object, whereas in JS this is an entirely different concept.
JS this can be divided into two types, one is the global context of this, one is the function context of this.
The this of the global context points to the window.
The this reference to a function context is not fixed and depends on where the function is called and how it is called, which can be summarized as follows:
This in the global context
This refers to the global object in the global execution environment (outside any function body), whether in strict mode or not.
console.log(this= = =window) // true
age = 18
console.log(window.age) / / 18
this.name = '阿林'
console.log(window.name) // 'alim'
console.log(name) // 'alim'
Copy the codeThis in the context of a function
This, like arguments, is an implicit argument to a function and can be called from any function.
The value of this in a function is not fixed, depending on where the function is located and how it is called.
Functions in the global context
Calls functions in the global context directly, this pointing to window by default.
function fn () {
console.log(this) // window
}
fn()
Copy the codefunction fn () {
var a = 1
console.log(this.a) / / 2
}
var a = 2
fn()
Copy the codeIn strict mode, undefined
'use strict'
function fn () {
console.log(this) // undefined
}
fn()
Copy the codeFunctions in objects
Call the function on the object that this refers to.
const obj = {
a: 1,
fn () {
console.log('this :>> '.this)
console.log('this.a :>> '.this.a)
}
}
obj.fn()
Copy the code
However, if the function has nested functions, this refers to window, which can be very confusing.
const obj = {
a: 1,
fn () {
return function () {
console.log('this :>> '.this)
console.log('this.a :>> '.this.a)
}
}
}
var a = 100
obj.fn()()
Copy the code
In fact, it can be understood as follows:
Is equivalent to obj. Fn () ()const temp = obj.fn() // Define a temporary variable to store the function returned by obj.fn
temp() // Execute this function
Copy the codeTemp in the above code example is in the Window environment at runtime, so this points to window.
If you want this to point to an object that has functions nested within it, before ES6, you can use a temporary variable _this to hold this,
const obj = {
a: 1,
fn () {
const _this = this
return function () {
console.log('this :>> ', _this) / / output obj
console.log('this.a :>> ', _this.a) / / output 1
}
}
}
obj.fn()()
Copy the codeArrow function
For example, if you want this to point to an object that has functions nested within it, you can also use the arrow function.
const obj = {
a: 1,
fn () {
return () = > {
console.log('this :>> '.this) / / output obj
console.log('this.a :>> '.this.a) / / output 1
}
}
}
obj.fn()()
Copy the codeFor normal functions, the inner this refers to the object on which the function is run.
For the arrow function, it does not create its own this; it only inherits this from the upper level of its scope chain.
So this in fn’s nested anonymous arrow function points to this at the next level in its scope chain, which is fn’s this, which is obj.
Babel es6: _this: _this: _this: _this: _this: _this
Babel online address
The constructor
Inside the constructor, this points to the newly created instance.
function Person (name) {
console.log('this :>> '.this)
this.name = name
}
const p = new Person('lin')
Copy the code
The value of this in the function can be changed explicitly
You can use call, apply, and bind to explicitly change the this reference in functions.
call
The function.prototype.call () method calls a Function with a specified this value and one or more arguments given separately.
function fn () {
console.log(this.name)
}
const obj = {
name: '阿林'
}
fn.call(obj) // Specify this as obj and print 'alin'
Copy the codeUsing call, you can implement inheritance by changing the reference to this in the constructor
function Person (name, age) {
this.name = name
this.age = age
}
function Student (name, age, grade) {
Person.call(this, name, age) // Call the Person constructor to specify this as the Student instance to implement inheritance
this.grade = grade
}
const s1 = new Student('阿林'.18.100)
console.log(s1)
Copy the codeapply
The function.prototype.apply () method calls a Function with a given this value and arguments supplied as an array (or array-like object).
The function of apply is exactly the same as that of call, except that the parameter form is different. Call is to pass multiple parameters, while apply is to pass only a set of parameters.
/ / use the call
function add (x, y, z) {
return this.x + this.y + this.z
}
const obj = {
x: 1.y: 2.z: 3
}
console.log(add.call(obj, 1.2.3)) / / 6
Copy the code/ / use the apply
function add (x, y, z) {
return this.x + this.y + this.z
}
const obj = {
x: 1.y: 2.z: 3
}
console.log(add.apply(obj, [1.2.3])) // Output 6, just pass the argument in a different form
Copy the codebind
The function.prototype.bind () method creates a new Function. When bind() is called, this of the new Function is specified as the first argument to bind(), and the remaining arguments will be used as arguments to the new Function when called.
The difference between call and apply is that calls to call call and apply are called directly, whereas calls to bind create a new function that must be manually called again.
function add (x, y, z) {
return this.x + this.y + this.z
}
const obj = {
x: 1.y: 2.z: 3
}
console.log(add.bind(obj, 1.2.3)) // Outputs the created function
const add1 = add.bind(obj, 1.2.3)
console.log(add1()) / / output 6
Copy the codeAt the end
The this of the global context points to the window.
The this reference to a function context is not fixed, depending on where the function is called and how it is called.
If my article is helpful to you, your 👍 is my biggest support ^_^
I’m Allyn, export insight technology, goodbye!
The last:
“Front-end Daily Query (23)” implements a function that outputs +1 each time it is called
Next up:
“Front-end Daily Question (25)” describes function parameters, arguments, residual arguments, default arguments, implicit arguments