Js函数

Js中一切都是对象,函数也是一个对象

函数的创建

声明函数
js 复制代码
// 创建函数对象
function run(){
   console.log("Hello World")
}


// 调用函数
run()

// 打印函数内容(不调用)
 console.log(run)

// 函数类型
 console.log(typeof run) // function
函数表达式
js 复制代码
// 函数表达式(匿名函数)
const fn3 = function () {
    console.log("函数表达式")

}

// 调用匿名函数
fn()
箭头函数
js 复制代码
// 箭头函数(匿名函数)
const fn4 = () => {
    console.log("Hello!")


}

// 调用箭头函数
fn()

函数参数

函数传参

形式参数

  • 在定义函数时,可以在函数中指定数量不等的形式参数(形参)
  • 在函数中定义形参,就相当于在函数内部声明了对应的变量但是没有赋值

实际参数

  • 在调用函数时,可以在函数的()传递数量不等的实参
  • 实参会赋值给其对应的形参
  • 参数:
    1.如果实参和形参数量相同,则对应的实参赋值给对应的形参
    2.如果实参多余形参,则多余的实参不会使用
    3.如果形参多余实参,则多余的形参为undefined

参数的类型

  • JS中不会检查参数的类型,可以传递任何类型的值作为参数
js 复制代码
// 函数表达式和箭头函数同理

function sum(x,y){
    console.log(x+y)
}

sum(1,3)   // 4
js 复制代码
// 如果箭头函数只有一个参数,()可以省略不写
const fn = a => {
  console.log(a) // 6
}

fn(6)
js 复制代码
// 定义参数时,可以给参数指定默认值
function sum(x,y=100){
  return x+y
}

// 默认值,会在没有对应实参时生效
sum(1) // 101

sum(1,2) // 3

函数返回值

在函数中,可以通过return关键字来指定函数的返回值

返回值就是函数的执行结果,函数调用完毕返回值便会作为结果返回

任何值都可以作为返回值使用(包括对象和函数之类)

如果return后不跟任何值,则相当于返回undefined

如果不写return,那么函数的返回值依然是undefined

return一执行函数立即结束

js 复制代码
function fn(){
  return "hello world"
}
let result = fn()
console.log(result) // hello worldd
js 复制代码
// 箭头函数的返回值简写:函数只有一个语句的时候,箭头函数的返回值可以直接写在箭头后,

const sum = (a,b) => a + b


// 如果在箭头函数后直接设置对象字面量返回值的时候,对象字面量需要()括起来
const fn () => ({"name":"li"})

作用域

作用域指的是一个变量的可见区域

全局作用域

  • 全局作用域在网页运行时创建,在网页关闭时消耗

  • 所有直接编写到script标签中的代码都位于全局作用域中

  • 全局作用域中的变量是全局变量,可以在任意位置访问

局部作用域

  • 块作用域

    • 块作用域是一种局部作用域

    • 块作用域在代码块执行时创建,代码块执行完毕它就销毁

    • 在块作用域中声明的变量是局部变量,只能在块内部访问,外部无法访问

函数作用域

  • 函数作用域也是一种局部作用域

  • 函数作用域在函数调用时产生,调用结束后销毁

  • 函数每次调用都会产生一个全新的函数作用域

  • 在函数中定义的变量是局部变量,只能在函数内部访问,外部无法访问

作用域链

当我们使用一个变量时,JS解释器会优先在当前作用域中寻找变量,如果找到了则直接使用,如果没找到,则去上一层作用域中寻找,找到了则使用如果没找到,则继续去上一层寻找,以此类推,如果一直到全局作用域都没找到,则报错变量名 is not defined

Window对象

  • 在浏览器中,浏览器为我们提供了一个window对象,可以直接访问

  • window对象代表的是浏览器窗口,通过该对象可以对浏览器窗口进行各种操作

  • 除此之外window对象还负责存储JS中的内置对象和浏览器的宿主对象

  • window对象的属性可以通过window对象访问,也可以直接访问(不适应window.)

js 复制代码
// 函数就可以认为是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创建一个一次性的函数作用域,避免变量冲突的问题

js 复制代码
 (function() {
            console.log("立即执行匿名函数")
        }());

this

函数在执行时,JS解析器每次都会传递进一个隐含的参数,这个参数就叫做 this

  • this会指向一个对象
  • this所指向的对象会根据函数调用方式的不同而不同
  • 以函数形式调用时,this指向的是window
  • 以方法的形式调用时,this指向的是调用方法的对象(谁调用this,this就是谁)
  • 通过this可以在方法中引用调用方法的对象
普通函数的this
js 复制代码
// 函数形式调用时,this指向的是window   
function test(){
            console.log(this === window) // true
        }
js 复制代码
// 以方法的形式调用时,this指向的是调用方法的对象   
	function get_this(){
         return this
    }

    const user  = Object()
    user.get = get_this

    console.log(user.get()) // user对象
    console.log(user.get() === user) // true
js 复制代码
  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和它的调用方式无关

html 复制代码
  <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运行代码的模式有两种:

  • 正常模式

    • 默认情况下代码都运行在正常模式中,在正常模式,语法检查并不严格
    • 它的原则是:能不报错的地方尽量不报错,这种处理方式导致代码的运行性能较差
  • 严格模式

    • 在严格模式下,语法检查变得严格

    • 禁止一些语法、更容易报错、提升了性能

  • 在开发中,应该尽量使用严格模式,

    • 这样可以将一些隐藏的问题消灭在萌芽阶段,同时也能提升代码的运行性能
js 复制代码
"use strict" // 全局的严格模式,编写在全局作用域
js 复制代码
  function fn(){
            "use strict" // 函数的严格的模式,编写在函数内部
        }
相关推荐
每天都要喝奶茶20 分钟前
vue3uniapp实现自定义拱形底部导航栏,解决首次闪烁问题
前端·vue.js·uni-app
Southern Wind21 分钟前
H5页面在线预览pdf
javascript·pdf
May_Xu_21 分钟前
vue3+less使用主题定制(多主题定制)可切换主题
前端·javascript·vue.js·vue·less·css3
qq_4275060821 分钟前
less解决function中return写法在浏览器被识别成Object导致样式失败的问题
前端·css·less
Elastic 中国社区官方博客27 分钟前
将你的 Kibana Dev Console 请求导出到 Python 和 JavaScript 代码
大数据·开发语言·前端·javascript·python·elasticsearch·ecmascript
闲人陈二狗38 分钟前
vue3中的pinia的使用方法
开发语言·javascript·ecmascript
北京_宏哥1 小时前
《最新出炉》系列入门篇-Python+Playwright自动化测试-41-录制视频
前端·python·测试
小华同学ai1 小时前
jsMind:炸裂项目,用JavaScript构建的思维导图库,GitHub上的热门开源项目
javascript·开源·github
小霖家的混江龙1 小时前
Vite 打包 H5 如何注入版本号
前端·vite
夏河始溢1 小时前
一七一、React性能优化方式
javascript·react.js·性能优化