Js函数
Js中一切都是对象，函数也是一个对象
函数的创建
声明函数
// 创建函数对象
function run(){
console.log("Hello World")
}
// 调用函数
run()
// 打印函数内容(不调用)
console.log(run)
// 函数类型
console.log(typeof run) // function
函数表达式
// 函数表达式(匿名函数)
const fn3 = function () {
console.log("函数表达式")
}
// 调用匿名函数
fn()
箭头函数
// 箭头函数(匿名函数)
const fn4 = () => {
console.log("Hello!")
}
// 调用箭头函数
fn()
函数参数
函数传参
形式参数
- 在定义函数时，可以在函数中指定数量不等的形式参数（形参）
- 在函数中定义形参，就相当于在函数内部声明了对应的变量但是没有赋值
实际参数
- 在调用函数时，可以在函数的()传递数量不等的实参
- 实参会赋值给其对应的形参
- 参数：
1.如果实参和形参数量相同，则对应的实参赋值给对应的形参
2.如果实参多余形参，则多余的实参不会使用
3.如果形参多余实参，则多余的形参为undefined参数的类型
- JS中不会检查参数的类型，可以传递任何类型的值作为参数
// 函数表达式和箭头函数同理
function sum(x,y){
console.log(x+y)
}
sum(1,3) // 4
// 如果箭头函数只有一个参数，()可以省略不写
const fn = a => {
console.log(a) // 6
}
fn(6)
// 定义参数时，可以给参数指定默认值
function sum(x,y=100){
return x+y
}
// 默认值，会在没有对应实参时生效
sum(1) // 101
sum(1,2) // 3
函数返回值
在函数中，可以通过return关键字来指定函数的返回值
返回值就是函数的执行结果，函数调用完毕返回值便会作为结果返回
任何值都可以作为返回值使用（包括对象和函数之类）
如果return后不跟任何值，则相当于返回undefined
如果不写return，那么函数的返回值依然是undefined
return一执行函数立即结束
function fn(){
return "hello world"
}
let result = fn()
console.log(result) // hello worldd
// 箭头函数的返回值简写：函数只有一个语句的时候，箭头函数的返回值可以直接写在箭头后,
const sum = (a,b) => a + b
// 如果在箭头函数后直接设置对象字面量返回值的时候，对象字面量需要()括起来
const fn () => ({"name":"li"})
作用域
作用域指的是一个变量的可见区域
全局作用域
全局作用域在网页运行时创建，在网页关闭时消耗
所有直接编写到script标签中的代码都位于全局作用域中
全局作用域中的变量是全局变量，可以在任意位置访问
局部作用域
块作用域
块作用域是一种局部作用域
块作用域在代码块执行时创建，代码块执行完毕它就销毁
在块作用域中声明的变量是局部变量，只能在块内部访问，外部无法访问
函数作用域
函数作用域也是一种局部作用域
函数作用域在函数调用时产生，调用结束后销毁
函数每次调用都会产生一个全新的函数作用域
在函数中定义的变量是局部变量，只能在函数内部访问，外部无法访问
作用域链
当我们使用一个变量时，JS解释器会优先在当前作用域中寻找变量，如果找到了则直接使用,如果没找到，则去上一层作用域中寻找，找到了则使用如果没找到，则继续去上一层寻找，以此类推,如果一直到全局作用域都没找到，则报错变量名 is not defined
Window对象
-
在浏览器中，浏览器为我们提供了一个window对象，可以直接访问
-
window对象代表的是浏览器窗口，通过该对象可以对浏览器窗口进行各种操作
-
除此之外window对象还负责存储JS中的内置对象和浏览器的宿主对象
-
window对象的属性可以通过window对象访问，也可以直接访问(不适应window.)
// 函数就可以认为是window对象的方法
window.console.log("hello world ") // 等价于console.log
window.max = 100 // 向window对象中添加的属性会自动成为全局变量
console.log(max) // 100 等价于 console.log(window.max)
/*
var 用来声明变量，作用和let相同，但是var不具有块作用域
- 在全局中使用var声明的变量，都会作为window对象的属性保存
- 使用function声明的函数，都会作为window的方法保存
- 使用let声明的变量不会存储在window对象中，而特殊存储在一个地方（无法访问）
- var虽然没有块作用域，但有函数作用域
*/
function test(){
a = 10 // 在局部作用域中，如果没有使用var或let声明变量，则变量会自动成为window对象的属性 也就是全局变量
}
变量提升
-
使用var声明的变量，它会在所有代码执行前被声明,所以我们可以在变量声明前就访问变量
-
函数的提升,使用函数声明创建的函数，会在其他代码执行前被创建,所以我们可以在函数声明前调用函数
-
let声明的变量实际也会提升，但是在赋值之前解释器禁止对该变量的访问
-
变量和函数的提升同样适用于函数作用域
-
定义形参就相当于在函数中声明了对应的变量，但是没有赋值
立即执行函数
在开发中应该尽量减少直接在全局作用域中编写代码,要尽量编写的局部作用域,如果使用let声明的变量，可以使用{}来创建块作用域
立即执行函数（IIFE),是一个匿名函数，并且只会调用一次，可以使用IIFE创建一个一次性的函数作用域，避免变量冲突的问题
(function() {
console.log("立即执行匿名函数")
}());
this
函数在执行时，JS解析器每次都会传递进一个隐含的参数,这个参数就叫做 this
- this会指向一个对象
- this所指向的对象会根据函数调用方式的不同而不同
- 以函数形式调用时，this指向的是window
- 以方法的形式调用时，this指向的是调用方法的对象（谁调用this，this就是谁）
- 通过this可以在方法中引用调用方法的对象
普通函数的this
// 函数形式调用时，this指向的是window
function test(){
console.log(this === window) // true
}
// 以方法的形式调用时，this指向的是调用方法的对象
function get_this(){
return this
}
const user = Object()
user.get = get_this
console.log(user.get()) // user对象
console.log(user.get() === user) // true
const user = Object()
user.name = "li"
user.set_name = function (name){
this.name = name
}
user.set_name("q")
console.log(user.name) // q
箭头函数的this
箭头函数没有自己的this，它的this由外层作用域决定,箭头函数的this和它的调用方式无关
<script>
function fn(){
return this
}
const fn1 = ()=>{
return this
}
const obj = {
// 简写方式，fn 等价于 fn:fn,
fn, // obj，以及方法的形式调用
fn1, // window，箭头函数定义在全局作用域
// 简写方式，等价于 say:function (){},
say(){
console.log(this) // obj
function t(){
console.log(this) // Window 以函数方式调用
}
t()
const t2 = () =>{
console.log(this) // obj,箭头函数的this由外层决定，外层的this是obj
}
t2()
}
}
console.log(obj.fn())
console.log(obj.fn1())
obj.say()
</script>
严格模式
JS运行代码的模式有两种：
-
正常模式
- 默认情况下代码都运行在正常模式中，在正常模式，语法检查并不严格
- 它的原则是：能不报错的地方尽量不报错，这种处理方式导致代码的运行性能较差
-
严格模式
-
在严格模式下，语法检查变得严格
-
禁止一些语法、更容易报错、提升了性能
-
-
在开发中，应该尽量使用严格模式，
- 这样可以将一些隐藏的问题消灭在萌芽阶段，同时也能提升代码的运行性能
"use strict" // 全局的严格模式,编写在全局作用域
function fn(){
"use strict" // 函数的严格的模式，编写在函数内部
}
