List of articles
1. Function definition and call
1.1 How to define a function
- Function declaration mode function keyword ( Name the function )
- Function expression ( Anonymous functions )
- new Function()
var fn = new Function(' Parameters 1', ' Parameters 2',...,' The body of the function ')
- Function The parameters must be in string format
- The third way is inefficient , It's not easy to write , Use less
- All functions are Function Example ( object )
// Function declaration mode
function fn() {
}
// Function expression ( Anonymous functions )
var fn = function() {
}
// utilize new Function('arg1','arg2', 'fn')
var f = new Function('a','b',console.log(a+b)')
f(1,2) // 3
All functions are Function Instance object
[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-BJzzyoaF-1583129073592)(https://cdn.nlark.com/yuque/0/2020/png/148146/1583069785134-c58604dc-ecf6-4d54-8cb6-bd43338329db.png#align=left&display=inline&height=303&name=image.png&originHeight=606&originWidth=1678&size=255639&status=done&style=none&width=839)]
1.2 How to call function
- Ordinary function
- Object method
- Constructors
- Binding event functions
- Timer Functions
- Immediate execution function
// Ordinary function
function fn() {
console.log(' Front end Lanfeng blog ')
}
fn() // Front end Lanfeng blog
// Object method
var obj = {
say: function () {
console.log(' Front end Lanfeng blog ')
}
}
obj.say() // Front end Lanfeng blog
// Constructors
function Star() {
}
new Star()
// Bound event function
btn.onclick = function() {
} // Click the button to call the function
// Timer Functions
setInterval(function() {
}, 1000)
// Immediate execution function
(function() {
console.log(' Front end Lanfeng blog ') // Automatically call
})()
2. this
2.1 Within the function this The direction of
these this The direction of , When calling a function, the difference between the calling methods determines this The direction of is different , Generally, it points to the caller .
Call mode
Call mode | this Point to |
---|---|
Ordinary function call | window |
Constructor call | Instance object Methods in prototype objects also point to instance objects |
Object method call | The object of this method |
Event binding method | Bind event object |
Timer Functions |
window |
Immediate execution function | window |
2.2 Change function interior this Point to
Javascript To provide some functional methods to help us deal with function interior more elegantly this Direction problem of , Commonly used bind()、call()、apply() Three methods . Next , Let's introduce the usage of these three methods in detail , See how they change this Point to the .
- call Method
call() Method calls an object , Simply understood as the way to call a function , But it can change the function this Point to .
fn.call(thisArg, arg1, arg2, ...)
var obj = {
name: 'lanfeng'
}
function fn(a, b) {
console.log(this)
console.log(a+b)
}
fn(1,2)// Point to window, 3
fn.call(obj, 1, 2) // Point to obj, 3
// Implementation inheritance
function Father(uname, age, sex) {
this.uname = uname
this.age = age
this.sex = sex
}
function Son () {
Father.call(this,uname, age, sex)
}
var son = new Son(' Liu Yan ',18,' Woman ')
call: The first one can call the function , The second one can change the... In the function this Point to
call The main role of inheritance can be achieved
- apply Method
apply() Method to call a function . Simply understood as the way to call a function , It is associated with call Method can also change the function of this The direction of , But it follows call The way to pass parameters is different , It is a parameter passed, and must be in an array
fun.apply(thisArg, [argsArray])
- thisArg: stay fun Function runtime specifies this Value
- argsArray: Value delivered , Must be included in the array
- The return value is the return value of the function , Because it's the calling function
var obj = {
name: 'lanfeng'
}
function fn(a, b) {
console.log(this)
console.log(a+b)
}
fn(1,2)// Point to window, 3
fn.apply(obj, [1, 2]) // Point to obj, 3
apply: The first one can call the function , The second one can change the... In the function this Point to
apply Must be an array ( Pseudo array )
apply The main application of , Find the maximum value in an array , minimum value
var arr = [1, 66, 3, 99, 4]
var max = Math.max.apply(Math, arr)
var min = Math.min.apply(Math, arr)
console.log(max, min) //99 1
- bind Method
bind() Methods do not call functions , But it can change the inside of the function this Point to
fn.bind(thisArg, arg1, arg2, ...)
- thisArg: stay fn Specified by function runtime this value
- arg1, arg2: Other parameters passed
- Returns the specified by this Value and initialization parameter modification of the original function copy
var obj = {
name: 'lanfeng'
}
function fn(a, b) {
console.log(this)
console.log(a+b)
}
fn(1,2)// Point to window, 3
var f = fn.bind(obj, 1, 2)
f()
bind: Will not adjust the original function , You can change this Point to , The function returned is to change this And the new functions that come out of it
bind Application : If there are functions we don't need to call immediately , But I want to change the internal of this function this Point to this time with bind
var btn = document.querySelector('button')
// In the past
btn.onclick = function() {
var that = this
this.disabled = true
setTimeout(function(){
that.disabled = false
}, 3000)
}
// bind usage
btn.onclick = function() {
this.disabled = true
setTimeout(function(){
this.disabled = false
}.bind(this), 3000)
}
2.3 call apply bind summary
The same thing :
Can change the function of the internal this Point to
Difference point :
- call and apply Will call functions , And change the inside of the function this Point to
- call and apply The parameters passed are different ,call Transfer parameter form arg1, arg2, … form ,apply Must be in array form
- bind Does not call function , You can change the internal of a function this Point to
Main application scenarios :
- call Often do inheritance
- apply It's often related to arrays , For example, with the help of mathematical objects to achieve the maximum value and minimum value of the array
- bind Don't call functions , But also want to change this Point to , Like changing the inside of the timer this Point to
summary
This article mainly shares javascript Function definition of 、 usage 、this And change this Several ways to point