1. Function definition and call
1.1 How to define a function
1. Custom function (named function)
2. Function expression (anonymous function)
3. Use new Function ('parameter 1', 'parameter 2', 'function body')
1、自定义函数（命名函数）
function fn() {
}
2、函数表达式（匿名函数）
var fun = function() {
}
3、利用 new Function ('参数1', '参数2', '函数体')
var f = new Function（'a', 'b', 'console.log(a + b)')
All functions are instances (objects) of Function
1.2 How to call the function
1. Ordinary function
2. Object method
3. Constructor
4. Binding event function
5. Timer function
6. Immediate execution function
1、普通函数
function fn() {
// this指向window
console.log('Hello World!', this)
}
fn();
// fn.call()
2、对象的方法
var o = {
sayHi: function() {
// this指向o
console.log('快乐', this)
}
}
o.sayHi()
3、构造函数
function Star() {
}
// this指向 ldh这个实例对象，原型对象里面的this也指向ldh这个实例对象
var ldh = new Star();
Star.prototype.sing = function() {
}
4、绑定事件函数
// this指向函数的调用者 btn
btn.onclick = function() {
} // 点击调用
5、定时器函数
// this指向window
setInterval(function() {
}, 1000) // 1s调用一次
6、立即执行函数
(function() {
console.log('立即执行') // 立即执行函数是自动调用
})()
2、this
2.1 The pointing of this in the function
2.2 Change the internal this point of the function
3 methods: call(), apply(), bind()
1、call()
var o = {
name: 'andy'
}
function fn(a, b) {
// 原本指向window,添加fn.call(o)后指向了o
console.log(this)
console.log(a + b)
}
fn.call(o, 1, 2)
// call作用: 第一个可以调用函数，第二个可以改变函数内的this指向
// call的主要作用可以实现继承
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('刘德华', 18, '男')
console.log(son)
2、apply()
var o = {
name: 'andy'
}
function fn(arr) {
// 原本指向window,添加fn.apply(o)后指向了o
console.log(this)
console.log(arr)
}
fn.apply(o, ['pink'])
// apply作用: 第一个可以调用函数，第二个可以改变函数内的this指向
// 参数必须是数组
// apply的主要应用，比如说可以借用数学内置对象求最大值
var arr = [1, 0, 99 ,3]
var max = Math.max.apply(Math, arr)
3、bind()
var o = {
name: 'andy'
}
function fn(a, b) {
// 原本指向window
console.log(this)
console.log(a + b)
}
var f = fn.bind(o, 1, 2)
f()
// 不会调用原来的函数，但能改变this指向
// 返回的是原函数改变this之后产生的新函数
// 应用： 如果有的函数不需要立即调用，但是又要改变this指向（点击一个按钮之后，禁用按钮，3秒后开启按钮）
2.3 call apply bind summary
The same point:
Both can change the point of this inside the function.
Difference points:
1. call and apply will call the function, and change the point of this inside the function.
2. The parameters passed by call and apply are different, and the parameters passed by call are in the form of aru1, aru2... apply must be in the form of an array [arg]
3. bind will not call a function, and can change the internal this of the function to point to
the main application scenarios:
1. call often does inheritance
2. apply is often related to arrays, such as using mathematical objects to achieve the maximum and minimum values of an array
3. bind does not call the function, but still wants to change the this point, such as changing the internal this point of the timer
3. Strict mode
3.1 Introduction
Strict mode is only supported in browsers with versions above IE10, and browsers with older versions will be ignored and normal mode will be used.
Strict mode has made some changes to normal javascript semantics:
1. Eliminate some unreasonable and imprecise parts of javascript grammar;
2. Eliminate some unsafe parts of code running;
3. Improve compiler efficiency;
4. No Some reserved words are allowed: class, enum, etc. as variable names;
3.2 Enable strict mode
Strict mode applies to the entire script or individual functions , so when using it, we divide strict mode into two cases: enabling strict mode for scripts and enabling strict mode for functions .
1. Enable strict mode for scripts: put a "use strict" before all statements
<script>
"use strict"
console.log("这是严格模式")
</script>
// 如果是立即执行函数
<script>
(function(){
"use strict"
var num = 10
function fn() {
}
})()
</script>
2. Enable strict mode for the function: put a "use strict" in the function
<script>
function fn(){
"use strict"
// 下面代码按照严格模式执行
}
function fun(){
// 里面按照普通模式执行
}
</script>
3.3 Changes in strict mode
1. Variable regulation
① In normal mode, if a variable is assigned without declaration, it is a global variable by default. This kind of usage is prohibited in strict mode, and must be declared before use;
②You cannot delete the declared variable at will, for example: delete x; the syntax is wrong;
2. This points to the problem in strict mode
③In the previous global scope, this pointed to window, this is undefined in strict mode;
④In strict mode, if the constructor is not called with new, this will report an error; if new, it will point to the created object instance, and no error will be reported; ⑤The
timer this still points to window;
⑥Event, The object still points to the caller;
3. Function changes⑦The
function cannot have parameters with the same name;
⑧It is not allowed to declare functions in non-function code blocks (if, for, etc.)
4. Higher-order functions
A higher-order function is a function that operates on other functions, receiving functions as parameters or outputting functions as return values.
A function is also a data type and can also be used as a parameter, most typically as a callback function.
function fn(a, b, callback) {
console.log(a + b)
callback && callback()
}
fn(1, 2, function(){
console.log('我是最后调用的')
})
5. Closure
5.1 Variable scope
The scope of variables is divided into two types: global variables and local variables
1. Global variables can be used inside the function
2. Local variables cannot be used outside the function
3. When the function is executed, the local variables in this scope will be destroyed
5.2 What is a closure
A function that has access to a variable in another function's scope is called a closure.
The main role of closures: extending the scope of variables
// fn外面的作用域可以访问fn内部的局部变量
function fn() {
var num = 10
function fun() {
console.log(num)
}
return fun
}
var f = fn()
f()