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 + '.');
    }
    
  • 相关阅读:
    Hive(八)Hive的Shell操作与压缩存储
    Hive(七)Hive分析窗口函数
    Hive(六)内置函数与高级操作
    Hive(五)数据类型与库表操作以及中文乱码
    Hive(四)Hive的3种连接方式与DbVisualizer连接Hive
    iOS性能调优系列(全)
    iOS性能优化-内存优化
    iOS 25个性能优化/内存优化常用方法
    iOS CoreData版本升级和数据库迁移
    FMDB数据迁移
  • 原文地址:https://www.cnblogs.com/jiangbo44/p/13288453.html
Copyright © 2011-2022 走看看