5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

1. Function definition and call

1.1 How to define a function

1. Function declaration mode function keyword （ Name the function ）
2. Function expression （ Anonymous functions ）
3. 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

1. Ordinary function
2. Object method
3. Constructors
4. Binding event functions
5. Timer Functions
6. 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

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 .

1. 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

1. 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

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 ：

1. call and apply Will call functions , And change the inside of the function this Point to
2. call and apply The parameters passed are different ,call Transfer parameter form arg1, arg2, … form ,apply Must be in array form
3. bind Does not call function , You can change the internal of a function this Point to

Main application scenarios ：

1. call Often do inheritance
2. 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
3. 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