zoukankan      html  css  js  c++  java
  • 【JavaScript】函数—可重用的代码块

    以下内容为学习记录,可以参考 MDN 原文。

    环境

    • vscode 1.46
    • Microsoft Edge 83

    概念

    在JavaScript中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码,
    然后在任何你需要的时候用一个简短的命令来调用,而不是把相同的代码写很多次。

    浏览器内置函数

    avaScript有许多内置的函数,可以让您做很多有用的事情,而无需自己编写所有的代码。
    事实上,许多调用(运行或者执行的专业词语)浏览器内置函数时调用的代码并不是使用JavaScript来编写,
    大多数调用浏览器后台的函数的代码,是使用像C++这样更低级的系统语言编写的,而不是像JavaScript这样的web编程语言。

    请记住,这些内置浏览器函数不是核心JavaScript语言的一部分——被定义为浏览器API的一部分,
    它建立在默认语言之上,以提供更多的功能(请参阅本课程的早期部分以获得更多的描述)。
    我们将在以后的模块中更详细地使用浏览器API。

    函数与方法

    程序员把函数称为对象方法(method)的一部分,你还不必了解JavaScript中已建构的对象在更深层次上是如何运作的。
    在我们继续前进之前,我们需要澄清一些有关方法和函数概念之间可能存在的误会,
    当你在网络上浏览相关信息的时候,你很可能会碰上这两个术语。

    到目前为止我们所使用的内置代码同属于这两种形式:函数和方法。
    你可以在 这里 查看内置函数,内置对象以及其相关方法的完整列表。

    严格说来,内置浏览器函数并不是函数——它们是方法。
    这听起来有点可怕和令人困惑,但不要担心,函数和方法在很大程度上是可互换的,至少在我们的学习阶段是这样的。

    二者区别在于方法是在对象内定义的函数。
    浏览器内置函数(方法)和变量(称为属性)存储在结构化对象内,以使代码更加高效,易于处理。

    自定义函数

    function draw() {
      ctx.clearRect(0,0,WIDTH,HEIGHT);
      for (var i = 0; i < 100; i++) {
        ctx.beginPath();
        ctx.fillStyle = 'rgba(255,0,0,0.5)';
        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
        ctx.fill();
      }
    }
    

    调用函数

    使用括号来调用函数。

    function myFunction() {
      alert('hello');
    }
    
    myFunction()
    // calls the function once
    

    匿名函数

    var myButton = document.querySelector('button');
    
    myButton.onclick = function() {
      alert('hello');
    }
    

    函数参数

    一些函数需要在调用它们时指定参数 ——这些参数值需要放在函数括号内,才能正确地完成其工作。

    var myArray = ['I', 'love', 'chocolate', 'frogs'];
    var madeAString = myArray.join(' ');
    // returns 'I love chocolate frogs'
    var madeAString = myArray.join();
    // returns 'I,love,chocolate,frogs'
    

    函数作用域和冲突

    我们来谈一谈 scope 即作用域,这是处理函数时一个非常重要的概念。
    当你创建一个函数时,函数内定义的变量和其他东西都在它们自己的单独的范围内,
    意味着它们被锁在自己独立的隔间中, 不能被函数外的代码访问。

    所有函数的最外层被称为全局作用域。在全局作用域内定义的值可以在任意地方访问。

    JavaScript 由于各种原因而建立,但主要是由于安全性和组织性。
    有时您不希望变量可以在代码中的任何地方访问,您从其他地方调用的外部脚本可能会开始搞乱您的代码并导致问题,
    因为它们恰好与代码的其他部分使用了相同的变量名称,造成冲突。这可能是恶意的,或者是偶然的。

    <!-- Excerpt from my HTML -->
    <script src="first.js"></script>
    <script src="second.js"></script>
    <script>
      greeting();
    </script>
    // first.js
    var name = 'Chris';
    function greeting() {
      alert('Hello ' + name + ': welcome to our company.');
    }
    // second.js
    var name = 'Zaptec';
    function greeting() {
      alert('Our company is called ' + name + '.');
    }
    
  • 相关阅读:
    区别@ControllerAdvice 和@RestControllerAdvice
    Cannot determine embedded database driver class for database type NONE
    使用HttpClient 发送 GET、POST、PUT、Delete请求及文件上传
    Markdown语法笔记
    Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
    Mysql 查看连接数,状态 最大并发数(赞)
    OncePerRequestFilter的作用
    java连接MySql数据库 zeroDateTimeBehavior
    Intellij IDEA 安装lombok及使用详解
    ps -ef |grep xxx 输出的具体含义
  • 原文地址:https://www.cnblogs.com/jiangbo44/p/13288453.html
Copyright © 2011-2022 走看看