JS进阶之字面量和函数 - 小前端

Home > List of blog posts > JS进阶之字面量和函数

Blogger Information

Blog 11

fans 0

comment 0

visits 5506

Special Recommendation

More>

Related recommendations

不定参数

... 用在函数参数中,是压入到数组中;用在函数调用时,功能是展开数组

...['马老师', '羊老师', '兔老师'] === '马老师', '羊老师', '兔老师'

//    sum = function (a, b) {
//     return a + b;
//   };
//   用箭头函数来简化匿名函数的编写
//   let sum = (a, b, c) => a + b + c;
//   let sum = (...arr) => arr;
let sum = (...arr) => arr.reduce((a, c) => a + c);
console.log(sum(10, 20, 30, 40, 50, 60));
// 从服务器API接口获取到了个商品列表: JSON数组
   const list = ['笔记本电脑', '小米12手机', '佳能 EOS-R相机'];
   console.log(list);
// 将每个商品,套上html标签,最终渲染到html页面中
   f = (...items) => items.map(item => `<li>${item}</li>`).join('');
   console.log(f(...list));
   document.body.innerHTML = '<ul>' + f(...list) + '</ul>';

返回值

默认都是单值返回;

业务需要返回多个值: 将多个值包装到一个容器中,再返回;

容器: 数组, 对象

// 3.1 数组
let f = () => [1, 2, 3];
console.log(f());
// 3.2 对象
// 如果只返回一个对象字面量, 必须将返回的对象转为表达式再返回,加个圆括号
f = () => ({
    a: 1,
    b: 2,
    get: function () {
        return 'ok';
    },
});

对象字面量简化

对象属性,如果和外部变量同名,则可以省去值,自动用外部同名变量进行初始化
对象方法, 可以将”: function “删除,但是要注意, 不要用箭头函数

// 全局变量/外部变量
let name = '牛老师';
let email = 'a@qq.com';
let user = {
    name,
    email,
    // getUserInfo: function () {
    //   return this.name + ': ' + this.email;
    // },
    // 方法简写, 将": function " 删去就可以
    getUserInfo() {
        return this.name + ': ' + this.email;
    },
    // 用箭头函数来改写方法
    // getUserInfo: () => this.name + ': ' + this.email,
    // getUserInfo: () => user.name + ': ' + user.email,
    // 箭头函数,不要用到对象字面量中
    // this: 普通函数, 调用时确定,绑定对象
    // this: 箭头函数, 声明时确定,绑定docment
};

模板字面量

如果一个字符串中,存在”占位符”, 则称为”模板字符串”

占位符: 插值/表达式/变量

插值之外的字符串: 字面量

let username = '狗老师';
//   console.log('hello ' + username);
// 反引号: 声明模板字符中,在ESC键的下面
console.log(`hello ${username}`);
// 10 + 40: 插值表达式
console.log(`10 + 40 = ${10 + 40}`);
let age = 10;
// ${age >= 18 ? `成年` : `未成年`}: 三元表达式
console.log(`${age >= 18 ? `成年` : `未成年`}`);

模板字面量作为函数参数,默认自带小括号,所以不需要括号

alert`Hello php.cn`;

模板函数/标签函数

模板函数的声明与普通函数是一样,只不过调用时,使用”模板字面量”做为参数

模板函数: 使用”模板字面量”做为参数的函数 function total(参数1, 参数2)

参数1: 必须是当前模板字面量参数中的字符串字面量组成的数组

参数2: 第二个参数必须是一个或多个模板字面量中插值列表

function total(strings, ...args) {
    console.log(strings);
    console.log(args);
}
let name = '手机';
let num = 10;
let price = 500;
total`名称: ${name}, 数量:${num},单价:${price}`;

闭包

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

词法作用域

比如下面代码

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() { // displayName() 是内部函数，一个闭包
      alert(name); // 使用了父函数中声明的变量
  }
  displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，displayName() 没有自己的局部变量。然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。词法（lexical）一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。

闭包应用

考虑以下例子

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方（也是有意思的地方）在于内部函数 displayName() 在执行前，从外部函数返回。

第一眼看上去，也许不能直观地看出这段代码能够正常运行。在一些编程语言中，一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕，你可能会认为 name 变量将不能再被访问。然而，因为代码仍按预期运行，所以在 JavaScript 中情况显然与此不同。

原因在于，JavaScript 中的函数会形成了闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境（变量 name 存在于其中）的引用。因此，当 myFunc 被调用时，变量 name 仍然可用，其值 Mozilla 就被传递到alert中。

实用的闭包

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。

在 Web 中，你想要这样做的情况特别常见。大部分我们所写的 JavaScript 代码都是基于事件的 — 定义某种行为，然后将其添加到用户触发的事件之上（比如点击或者按键）。我们的代码通常作为回调：为响应事件而执行的函数。

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

size12，size14 和 size16 三个函数将分别把 body 文本调整为 12，14，16 像素。我们可以将它们分别添加到按钮的点击事件上。如下所示：

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

用闭包模拟私有方法

编程语言中，比如 Java/c++，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。

而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。

下面的示例展现了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为模块模式（module pattern）

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

在之前的示例中，每个闭包都有它自己的词法环境；而这次我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。

该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。

这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量Counter。我们可以把这个函数储存在另外一个变量makeCounter中，并用他来创建多个计数器。

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

请注意两个计数器 Counter1 和 Counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。

每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

性能考量

如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时，方法都会被重新赋值一次（也就是说，对于每个对象的创建，方法都会被重新赋值）。

考虑以下示例：

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };
  this.getMessage = function() {
    return this.message;
  };
}

在上面的代码中，我们并没有利用到闭包的好处，因此可以避免使用闭包。修改成如下：

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

开始学习大前端的若干问题

2022-07-01 00:40:18