【前端】JavaScript学习笔记(三)——函数


?课程链接

【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili


?学习笔记

定义函数




    
    Title

    






多个参数的问题




    
    Title


    





变量的作用域

在JavaScript中 var定义的变量实际是有作用域的

假设在函数体中声明 则在函数体外不可以使用(非要想实现 可以研究 闭包

"use strict"

function f() {
    var x = 1
    x = x + 1
}
x = x +2 // Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名 只要在函数内部 就不冲突

function f() {
    var x = 1
    x = x + 1
}
function f2() {
    var x = 1
    x = x + 1
}

内部函数可以访问外部函数成员 反之则不行

function f() {
    var x = 1
    // 内部函数可以访问外部函数成员 反之则不行
    function f2() {
        var y = x + 1
    }
    var z = y + 1 // Uncaught ReferenceError: y is not defined
}

假设内部函数变量和外部函数变量 重名

function f() {
    var x = 1
    function f2() {
        var x = "A"
        console.log("inner" + x)
    }
    console.log("outer" + x)
    f2()
}
f()

JavaScript中函数查找变量从自身函数开始 由内向外 查找

假设外部存在这个同名的函数变量 则内部函数回屏蔽外部函数的变量


提升变量的作用域

function f() {
    var x = "x, y:" + y
    console.log(x)
    var y = "y"
}
f()

output:x, y:undefined

说明:JS执行引擎,自动提升了y的声明,但是不会提升变量y的赋值

这个是在JavaScript建立之初就存在的特性。

养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护;


全局变量

// 全局变量
var x = 1
function f() {
    console.log(x)
}
f()
console.log(x)

全局对象

var x = "xxx"
alert(x)
alert(window.x) // 默认所有的全局变量 都会自动绑定在 windows对象下

alert()这个函数本身也是 windows 的一个变量

var x = "xxx"

window.alert(x)

var oldAlert = window.alert
// oldAlert(x)

window.alert = function () {

}
// 此时alert失效 不弹窗
window.alert("失效")

// 恢复
window.alert = oldAlert
window.alert("已恢复")

JavaScript 实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错 ReferenceError

规范

由于我们所有的全局变量都会绑定到我们的window上。

如果不同的js文件,使用了相同的全局变量,产生冲突 -> 如何能够减少冲突

// 唯一全局变量
var Demo = {}

// 定义全局变量
Demo.name = "demo"
Demo.add = function (a, b) {
    return a + b
}

把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题


局部作用域 let

ES6 let 关键字 解决局部作用域冲突问题

建议都使用let去定义局部作用域的变量


常量 const

在ES6之前,只有用 全部大写字母 命名的变量就是常量,建议不要修改这样的值

在ES6引入了常量关键字 const

const PI = "3.14"
console.log(PI)
PI = "123" // Uncaught TypeError: Assignment to constant variable.

方法

定义方法

var Demo = {
    name:"demo",
    birth:2021,
    // 方法
    age:function () {
        var now = new Date().getFullYear()
        return now - this.birth
    }
}
// 属性
Demo.name
// 方法
Demo.age()

this是无法指向的 是默认指向调用它的对象


apply

apply在JS中可以控制this的指向

function getAge() {
    var now = new Date().getFullYear()
    return now - this.birth
}

var Demo = {
    name:"demo",
    birth:2021,
    // 方法
    age:getAge
}
getAge.apply(Demo,[]) // this 指向了Demo 参数为空

?转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:

版权所有,如需转载请注明出处。