Take you to Javascript functions in advance (1)

1.1 Definition of functions

1. Function keyword (named function)
2. Function expressions (anonymous functions)
3. new Function()

var fn = new Function(Parameters' 1 '.Parameters' 2 '. .'Function body')
Copy the code

• All arguments in Function must be strings
• The third way is inefficient in execution, inconvenient to write, and less used
• All functions are instances of Function

Var fn = function() {} var fn = function() {} new function('arg1','arg2', 'fn) var f = new Function (' a', 'b', the console log (a + b) ') f (1, 2) / / 3Copy the code

All functions are Function instance objects

2. this

2.2 Change the this pointer inside the function

Javascript provides a number of function methods to help us more elegantly handle this pointing problems inside functions. Common methods include bind(), call(), and apply(). Let’s take a closer look at the three methods and see how they change the “this” reference.

1. Call method

The call() method calls an object, simply the way a function is called, but it can change the function’s this reference.

fn.call(thisArg, arg1, arg2, ...)
Copy the code

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

// Implement inheritance
function Father(uname, age, sex) {
	this.uname = uname
  this.age = age
  this.sex = sex
}
function Son (uname, age, sex) {
	Father.call(this,uname, age, sex)
}
var son = new Son('Ada'.18.'woman')
Copy the code

Call: The first one can call the function, and the second one can change the main role of this to call in the function to implement inheritance

2. The apply method

The apply () method calls a function. The call method can change the direction of the function’s this, but it is different from the call method. The parameters must be passed in an array

fun.apply(thisArg, [argsArray])
Copy the code

• ThisArg: Specifies the value of this when fun runs
• ArgsArray: The value passed must be contained in the array
• The return value is the return value of the function, because it is 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
Copy the code

Apply: the first one can call the function, and the second one can change the parameter in the function that this refers to apply

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) / / 1 99
Copy the code

3. The bind method

The bind() method does not call the function, but can change the this reference inside the function

fn.bind(thisArg, arg1, arg2, ...)
Copy the code

• ThisArg: this value specified when the fn function is run
• Arg1, arg2: Other arguments to pass
• Returns a copy of the original function modified with the specified this value and initialization arguments

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()

Copy the code

Bind: If you don’t need to call a function immediately, but you want to change the this reference inside the function, use bind

var btn = document.querySelector('button')
// The previous usage
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)}Copy the code