一半设计一半前端

前端开发的模块化发展和ES6模块化标准

Sun, 30 Jul 2023 11:47:57 +0800

在框架里面都讲模块化、组件化，其实发展到今天，模块化是走了很长的一条路的，现在ES6终于标准化了，不过也可以看看以前的历史。

1、模块化发展历史

1.1 模块化的目的

2009年以前，前端还属于手动操作html/css/js之间的关系，js代码还不够庞大到需要工程化的处理。

随着js的不断发展，在项目中越来越重要，承担的功能越来越多，js代码的体量和复杂度上升，就需要进行规范的管理。

因为有了运行大量 Javascript 脚本的复杂程序，所以将 JavaScript 程序拆分为可按需导入的单独模块的机制就非常重要，一个js文件代码多了之后，就需要拆分成多个模块的文件，这样就形成了模块化的概念。

在今天看来，模块化应该具有以下价值：

可维护性
减少全局污染
可复用性
版本管理
方便管理依赖关系
分治思想的实践

但是，随着js的复杂攀升，ECMAScript却没有提出一套规范化的模块化语法，所以，js的模块化走了一条十来年不断演化的道路。

1.2 前端模块化的雏形

1.2.1 第一阶段文件划分

具体做法就是将每个功能及其相关状态数据各自单独放到不同的文件中，约定每个文件就是一个独立的模块，使用某个模块就是将这个模块引入到页面中，然后直接调用模块中的成员（变量 / 函数）

//module-1.js  
var module_name = 'module1';
function fn1() {
  console.log(module_name + 'fn1');
}
function fn2() {
  console.log(module_name + 'fn2');
}
$('html').on('click', function() {
  console.log(module_name+'被执行了')
})

//module-2.js  
var module_name = 'module2';
function fn1() {
  console.log(module_name + 'fn1');
}
function fn2() {
  console.log(module_name + 'fn2');
}

<!--index.html -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/module-1.js"></script>
<script src="js/module-2.js"></script>
<script>
    // 调用函数的时候,两个模块有相同的函数名，导致后面的模块覆盖了前面的
    // 命名冲突
    fn1();
    // 模块内部的成员可以在外面被修改
    module_name = '我的模块名';
    console.log(module_name)
</script>

这种缺点非常明显：

模块变量相当于在全局声明，没有私有空间，所有成员都可以在模块外部被访问或者修改
模块多了之后，会有命名冲突的问题。
变量都在全局定义，导致难以调试，我们很难知道某个变量到底属于哪些模块。
无法清晰地管理模块之间的依赖关系和加载顺序。假如 a.js 依赖 b.js，那么 HTML 中的 script 执行顺序需要手动调整，不然可能会产生运行时错误。

1.2.2 第二阶段命名空间

在第一阶段的基础上，通过将每个模块「包裹」为一个全局对象的形式实现，有点类似于为模块内的成员添加了「命名空间」的感觉。

// module-1.js
var module1 = {
  module_name: 'module1',
  fn1: function () {
    console.log(this.module_name + 'fn1');
  },
  fn2: function () {
    console.log(this.module_name + 'fn2');
  }
}

$('html').on('click', function () {
  console.log(module2.module_name + '被执行了')
})

// module-2.js
var module2 = {
  module_name: 'module2',
  fn1: function () {
    console.log(this.module_name + 'fn1');
  },
  fn2: function () {
    console.log(this.module_name + 'fn2');
  }
}
// 无法管理模块之间的依赖关系。
module1.fn2()；

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/module-1.js"></script>
<script src="js/module-2.js"></script>
<script>
    // 通过「命名空间」减小了命名冲突的可能
    module1.fn1();
    module2.fn1();
    // 但是同样没有私有空间，所有模块成员也可以在模块外部被访问或者修改，
    module1.module_name = '改了之后的模块名';
    console.log(module1.module_name);
</script>

虽然每个变量都有自己专属的命名空间，我们可以清楚地知道某个变量到底属于哪个模块，同时也避免全局变量命名的问题。但是依然没有私有空间，外部可以修改模块内部变量，也无法管理模块之间的依赖关系。

1.2.3 IIFE立即执行的函数表达式

使用立即执行函数表达式（IIFE：Immediately-Invoked Function Expression）为模块提供私有空间。

具体做法就是将每个模块成员都放在一个函数提供的私有作用域中，对于需要暴露给外部的成员，通过挂在到全局对象上的方式实现。

//module-1.js
; (function () {
  var module_name = 'module1';
  function fn1() {
    console.log(module_name + 'fn1');
  }
  function fn2() {
    console.log(module_name + 'fn2');
  }
   // 不能直接访问模块内部的私有成员
  $('html').on('click', function () {
    console.log(module1.module_name + '被执行了')
  })
  window.module1 = {
    fn1: fn1,
    fn2: fn2
  }
})();

//module-2.js
; (function () {
  var module_name = 'module2';
  function fn1() {
    console.log(module_name + 'fn1');
    module1.fn1();
  }
  function fn2() {
    console.log(module_name + 'fn2');
  }
  
  window.module2 = {
    fn1: fn1,
    fn2: fn2
  }
})();

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/module-1.js"></script>
<script src="js/module-2.js"></script>
<script>

    module1.fn1();
    module2.fn1();
    // 外部不能直接访问模块内部的私有成员
    console.log(module1.module_name); // undefined
    // 为模块添加了一个新的属性，虽然名字和模块内部的变量名同名，但是它们在不同的作用域，互相不受影响。
    module1.module_name = '改了模块名字';
    console.log(module1.module_name); //改了模块名字
    module1.fn1(); // module1fn1
    console.log(module1);//{module_name: '改了模块名字', fn1: ƒ, fn2: ƒ}

</script>

每个IIFE即立即执行函数都会创建一个私有的作用域，在私有作用域中的变量外界是无法访问的，只有模块内部的方法才能访问。相比于命名空间的模块化手段，IIFE实现的模块化安全性要更高，对于模块作用域的区分更加彻底。

对于模块内部的module_name变量，我们只能在模块内部的fn函数中通过闭包访问，而在其它模块中无法直接访问。这就是模块私有化功能，避免模块私有成员被其他模块非法篡改，相比于命名空间的实现方式更加安全。

1.2.4 利用传参解决依赖问题

只用IIFE虽然解决了私有化的问题，但是没有解决模块之间的依赖关系。

后来通过利用立即执行函数的参数传递模块依赖项。这使得每一个模块之间的关系变得更加明显。

//module-1.js
; (function ($) {
  var module_name = 'module1';
  function fn1() {
    console.log(module_name + 'fn1');
    $('body').css('backgroundColor', '#ddd');
  }
  function fn2() {
    console.log(module_name + 'fn2');
  }

  window.module1 = {
    fn1: fn1,
    fn2: fn2
  }
})(jQuery);

//module-2.js
; (function () {
  var module_name = 'module2';
  function fn1() {
    console.log(module_name + 'fn1');
  }
  function fn2() {
    console.log(module_name + 'fn2');

  }
  module1.fn2();
  
  window.module2 = {
    fn1: fn1,
    fn2: fn2
  }
})();

<script src="http://unpkg.com/jquery"></script>
<script src="js/module-1.js"></script>
<script src="js/module-2.js"></script>
<script>  
    module1.fn1();
    module2.fn1();
</script>

2、模块化的规范

十年之前，模块化还主要使用闭包简单的实现一个命名空间。使用这种解决方式可以简单粗暴的处理全局变量和依赖关系等问题。

转眼间模块化已经发展了有十余年了，不同的工具和轮子层出不穷，下面是最各大工具或框架的诞生时间：

生态	诞生时间
CommonJS	2009年
Node.js	2009年
NPM	2010年
requireJS(AMD)	2010年
seaJS(CMD)	2011年
broswerify	2011年
webpack	2012年
grunt	2012年
gulp	2013年
react	2013年
vue	2014年
ES6(Module)	2015年
angular	2016年
redux	2015年
vite	2020年
snowpack	2020年

随着前端工程的日益庞大，前端的模块化规范统一也经历了漫长的发展阶段，现在业界主流的三大模块规范是：CommonJS、AMD和ES Modules。对于模块规范而言，一般会包含两方面内容：

统一的模块化代码规范
实现自动加载模块的加载器(也称loader)

2.1 CommonJS规范

CommonJS 是业界最早正式提出的 JavaScript 模块规范，主要用于服务端 Node.js 。

//module-a.js
var data = "hello world";
function getData() {
  return data;
}
module.exports = {
  getData,
};

//index.js
const { getData } = require("./module-a.js");
console.log(getData());

CommonJS 中使用require来导入一个模块，用module.exports来导出一个模块。CommonJS 定义了一套完整的模块化代码规范，不过仍然存在一些问题：

它的模块加载器由 Node.js 提供，依赖了 Node.js 本身的功能实现。如果 CommonJS 模块直接放到浏览器中无法执行。
CommonJS 约定以同步的方式进行模块加载，这种加载机制放到浏览器端，会带来明显的性能问题。它会产生大量同步的模块请求，浏览器要等待响应返回后才能继续解析模块。即，模块请求会造成浏览器 JS 解析过程的阻塞，导致页面加载速度缓慢。

CommonJS 的这种加载机制放在服务端是没问题的，一来模块都在本地，不需要进行网络 IO，二来只有服务启动时才会加载模块，而服务通常启动后会一直运行，所以对服务的性能并没有太大的影响。

但是在浏览器端却会造成阻塞，白屏时间过长，用户体验不够友好。

总之，CommonJS 是一个不太适合在浏览器中运行的模块规范。因此，业界也设计出了全新的规范来作为浏览器端的模块标准，最知名的要数AMD和CMD了。

2.2 AMD规范和CMD规范

2.2.1 RequireJS和SeaJS

AMD全称为Asynchronous Module Definition，即异步模块定义规范。模块根据这个规范，在浏览器环境中会被异步加载，而不会像 CommonJS 规范进行同步加载，也就不会产生同步请求导致的浏览器解析过程阻塞的问题了。

RequireJS 遵循的是 AMD（异步模块定义）规范。

SeaJS 遵循的是 CMD （通用模块定义）规范（阿里的玉伯主导的）

随着 2015 年 6 月，ECMAScript 对 ES6 Modules 的正式发布，浏览器厂商和 Node.js 随之纷纷跟进实现，市面上的模块化加载库随之暗淡失色，间接给 CommonJS 社区判了死刑。在浏览器端取而代之流行的做法的是大家都使用 ES6 Modules 写法，然后使用 Babel 等的 transpiler 来应对不同浏览器版本的支持程度和在浏览器端异步特性产生的一些待解决的问题。Node.js 的模块还是大量的采用 CommonJS 模式，随着对 ES6 Modules 的支持力度的提高和可以兼容之前 CommonJS 模块，CommonJS 写法过渡到 ES6 Modules 只是时间的问题。

3、 ES6 Module

ES Module(或ESM)，是由 ECMAScript 官方提出的模块化规范，它已经得到了现代浏览器的内置支持。

不仅在浏览器端，一直以 CommonJS 作为模块标准的 Node.js 也从12.20版本开始正式支持原生 ES Module。

3.1 ESM特性

3.1.1 在HTML中声明脚本模块

<!-- 引入外部模块 -->
<script type="module" src="main.js"></script>

<!-- 把模块导入内部脚本-->
<script type="module">
    console.log('this is es module');
</script>

3.1.2 默认是严格模式

<!-- ESM 默认采用严格模式 use strict -->
<script type="module">
    console.log(this); //undefined
</script>

3.1.3 每个模块都是运行在单独的私有作用域中

3.1.4 通过CORS访问外部资源

<!-- 通过CORS 跨域资源共享方式访问外部的模块， 有的外部地址不支持CORS，会报错 -->
<script type="module" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 支持CORS跨域访问资源 -->
<script type="module" src="unpkg.com/jquery"></script>

CORS 全称为 Cross-Origin Resource Sharing，被译为跨域资源共享，简称跨域访问，是 W3C 制定的标准协议。它由一系列传输的 HTTP 标头（首部字段）组成，浏览器会根据这些 HTTP 标头决定着是否阻止前端 JS 代码获取跨域请求的资源。CORS 主要作用是消除各种 API 的同源限制，以便在不同源（服务器）之间共享资源，且确保跨域数据传输的安全性。

3.1.5 模块会自动延迟加载

<!-- ESM 的script标签会延迟执行脚本,不影响页面的渲染 -->
<script type="module">
    alert('Hello');
</script>
<p>页面内容</p>

3.2 导入和导出

模块都在单独的私有作用域中，所以外部不能直接访问，必须通过导出到外部才能访问。

为了获得模块的功能要做的第一件事是把它们导出来。使用 export 语句来完成。

导出有三种方式。

3.2.1 变量函数声明导出

//module.js

// 导出变量username
export var username = '诸葛'
// 导出函数sayName
export function sayName() {
  console.log(username);
}
// 导出类Person
export class Person {
  constructor(username) {
    this.username = username;
  }
}

//app.js

//导入，这里的.js不能省略。import {} 是一种语法，不是解构赋值
import { username, sayName, Person } from "../modules/module.js";
console.log(username);
sayName()
console.log(new Person('孔明'))

<!--index.html-->

<script type="module" src="js/app.js"></script>

3.2.2 命名导出

//module.js

// 命名导出方式

var username = '诸葛';

function sayName() {
  console.log(username);
}

class Person {
  constructor(username) {
    this.username = username;
  }
}

// 集中命名导出
export {username, sayName, Person};
// 通过as重命名，导入的时候，用重命名的名字导入
export {username, sayName as sayUserName, Person};

3.2.3 默认导出

//module.js
//默认导出 export default ，后面没有{}大括号
export default sayName;
// 或者默认导出一个匿名函数
export default function(){
  console.log(username);
}

//app.js
//导入默认的导出时，直接写上导出的名字，不需要大括号。因为每个模块只允许有一个默认导出
import sayName from "../modules/module.js";
//是这种的缩写形式
//import {default as sayName} from '../modules/module.js'

导入有四种方式。

3.2.4 按需导入

导入的变量名字必须和导出的变量名一致。后面的路径是相对根目录的相对路径，必须以 . 或者 / 或者http路径开头，不能直接用字母开头。

import { sayName } from "../modules/module.js";

3.2.5 命名空间导入

如果需要导入的模块很多，有可能需要重命名导出的变量，导致有点冗余。

import { sayName as sayName1 } from "../modules/module.js";
import { sayName as sayName2} from "../modules/module1.js";

一个更好的解决方是，导入每一个模块功能到一个模块功能对象上。可以使用以下语法形式：

import * as Module from '/modules/module.js';

这将获取 module.js 中所有可用的导出，并使它们可以作为对象模块的成员使用，从而有效地为其提供自己的命名空间。

import * as Module1 from '../modules/module.js';
import * as Module2 from '../modules/module1.js';
console.log(Module1.username);
Module1.sayName();
console.log(new Module1.Person('孔明'))

console.log(Module2.username)
Module2.sayName();

3.2.6 默认导入

import _ from 'module.js'

导入export default后面的值，可以取任意名字，因为一个模块只有一个export default，可以省略大括号。

3.2.7 默认和按需同时导入

//module.js
export { username, count }

export default sayName

//app.js
//两种方式导入
// import {username, count, default as sayName} from '../module/module.js'
import sayName, {username, count} from '../module/module.js'

3.2.8 只运行不导入

import 'module.js'

只运行模块而不引入模块中的任何方法或变量。

3.2.9 动态导入

import 只能放在最外层作用域中，不能嵌套在if这种块作用域中。

from 后面的路径也不能是变量。

所以，当不知道模块加载的路径，或者在刚开始还不需要加载模块的时候，可以使用动态加载。

这时用import()函数来实现动态加载。

import('../module/module.js').then(function(module) {
  console.log(module)
})

这是异步加载，当加载完模块后，才执行后面的回调函数，module形参获得模块返回的导出对象。

3.2.10 注意事项

export {} 和 import {}都是一种语法，不是对象字面量，也不是解构赋值

只有export default 后面可以跟一个值，可以是变量，函数，对象，字符串等值。export default {}这才是默认导出一个对象。

导入和导出之间的成员的值是一种引用关系，不是赋值关系。导出的成员是只读的。

//module.js
var count = 0;
var username = 'Tom';

setTimeout(function () {
  username = 'Jenn';
}, 1000)

setInterval(function () {
  count++;
}, 1000)

export { username, count }

//app.js
import {username, count} from '../module/module.js'
console.log(count, username);
setInterval(function() {
  console.log(count, username);
}, 1500)

关于原生js的教案差不多就整理完了，算是一个总结吧，自动化构建和框架的教案就不放出来了。如果我以后转行不干了，再说！

继续阅读《前端开发的模块化发展和ES6模块化标准》的全文内容...

分类: JavaScript教程 | Tags: ES6 Module，模块化， | 添加评论(2)

Vue版本的todos本地任务清单！

Fri, 28 Jul 2023 12:43:59 +0800

前面用ES6写了一个 todos，这里放一个Vue版本写的，可以通过代码对比，看看Vue和原生js的区别。

用ES6写了一个todos，本地任务清单！

点击图片看效果。

核心代码：

const filters = {
    all(todos) {
      return todos;
    },
    active(todos) {
      return todos.filter(item => !item.completed);
    },
    completed(todos) {
      return todos.filter(item => item.completed);
    }
  }
  const TODO_KEY = 'todo-keys'
  const storage = {
    get() {
      return JSON.parse(localStorage.getItem(TODO_KEY)) || [];
    },
    set(todos) {
      localStorage.setItem(TODO_KEY, JSON.stringify(todos));
    }
  }

  const vm = new Vue({
    el: '#app',
    data: {
      // todos:[
      //  {id:1, title: '上课', completed: true},
      //  {id:2, title: '吃饭', completed: false},
      //  {id:3, title: '睡觉', completed: false},
      //  {id:4, title: '梦游', completed: false},
      // ],
      todos: storage.get(),
      newTodo: '',
      editingTodo: null,
      todoBeforeTitle: '',
      todoType: 'all'
    },
    methods: {
      pluralize(unit) {
        return unit + (this.remaining === 1 ? '' : 's');
      },
      addTodo(){
        const val = this.newTodo.trim();
        if(!val) return;
        // this.todos.push({id:this.todos.length > 0 ? this.todos[this.todos.length -1].id + 1 : 0 , title: val, completed: false});
        this.todos.push({id: Date.now(), title: val, completed: false});
        this.newTodo = '';
      },
      removeTodo(todo) {
        const index = this.todos.indexOf(todo);
        this.todos.splice(index,1);
      },
      editTodo(todo) {
        this.editingTodo = todo;
        this.todoBeforeTitle = todo.title;
      },
      editDone(todo) {
        if(todo !== this.editingTodo) return;
        const val = todo.title.trim();
        if(!val) {
          this.removeTodo(todo);
        }else{
          todo.title = val;
        }      
        this.editingTodo = null;
        this.todoBeforeTitle = '';
      },
      cancelEdit(todo) {
        todo.title = this.todoBeforeTitle;
        this.editingTodo = null;
        this.todoBeforeTitle = '';
      },
      removeAllCompleted() {
        // this.todos = this.todos.filter(item => !item.completed)
        this.todos = filters.active(this.todos);
      }
    },
    computed: {
      remaining() {
        // return this.todos.filter(item => !item.completed).length;
        return filters.active(this.todos).length;
      },
      allDone:{
        get() {
          return this.remaining === 0;
        },
        set(value) {
          this.todos.forEach(item => item.completed = value);
        }
      },
      filtersTodo() {
        return filters[this.todoType](this.todos);
      }
    },
    directives: {
      'todo-focus'(el) {
        el.focus();
      }
    },
   
    watch: {
      todos: {
        deep: true,
        handler: storage.set
      }
    }
  })

差不多了，原生js的案例也整理完了，框架的案例就不上了，如果有一天我转行了，可以把所有完整的项目都分享出来，再给自己三个月的时间吧。

继续阅读《Vue版本的todos本地任务清单！》的全文内容...

分类: JavaScript案例集 | Tags: Vue，todos，本地任务清单，js案例， | 添加评论(0)

还没有评论，您来说两句？

JavaScript案例10：仿百度风云排行榜 (2019-08-15)
利用ajax+mock.js+echarts.js模拟汽车销量饼状图 (2021-12-20)
商城购物车ES6原生js实现零漏洞 (2023-07-02)
利用transform打造走动的2D时钟 (2018-05-15)
JavaScript案例8：两组幻灯分别切换和统一切换 (2018-09-14)

用ES6写了一个todos，本地任务清单！

Sat, 22 Jul 2023 11:29:48 +0800

学完了ES6，就可以拿一个小项目练练手，todoMVC是一个比较出名的用来练习各种编程语言的项目，可以直接去它官网看。

这里写一个ES6版本的。

点击图片看效果，如果想看Vue2版本的，也可以点这里。

增删改查功能都有，自己看代码。

核心代码：

// 找对象
  const newTodoInput = $('.new-todo');
  const oTodoList = $('.todo-list');
  const oMain = $('.main');
  const oFooter = $('.footer');
  const oTodoCount = $('.todo-count');
  const oClearCompleted = $('.clear-completed');
  const oToggleAll = $('.toggle-all');
  const oTodoType = $$('.filters a');

  // 数据的本地存储
  const TODOS_KEY = 'dotos_ES6';
  let todosStorage = {
    get() {
      return JSON.parse(localStorage.getItem(TODOS_KEY)) || [];
    },
    set(todos) {
      localStorage.setItem(TODOS_KEY,JSON.stringify(todos));
    }
  }
  // 全局变量
  // 存储数据的todos
  // let todos = [
  //  { id: 1, title: '学习', completed: false },
  //  { id: 2, title: '做饭', completed: true },
  //  { id: 3, title: '接娃放学', completed: true },
  // ]
  let todos = todosStorage.get();

  // 用于区分单击和双击事件
  let timer = null;

  // 初始化渲染
  render(todos);

  // 当enter的时候添加事项
  newTodoInput.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
      // 添加事项
      addTodo();
      todosStorage.set(todos);
      // 重新渲染
      render(todos);
    }
  })

  // 因为有很多事项，有很多删除按钮，所以用事件委托性能更高
  // ul同时委托了单击事件和双击事件，通过300ms的延迟来判断是单击还是双击
  // 如果300ms以后没有单击，则是单击事件，执行对应的代码。
  oTodoList.addEventListener('click', function (e) {
    clearTimeout(timer);
    timer = setTimeout(function () {
      const target = e.target;
      console.log(target);
      const tempLi = target.closest('li');
      // 根据li的id属性找到todos里面该id的数据,数字和字符串的相等用==
      const todo = todos.find(item => item.id == tempLi.id);
      // 如果点击的是删除按钮，则删除该事项
      if (target.className === 'destroy') {
        delTodo(todo);
      }
      // 如果点击的是复选框按钮，则切换完成和未完成的状态
      if (target.className === 'toggle') {
        todo.completed = target.checked;
      }
      // 修复双击下出现输入框编辑的时候，单击输入框的文本，输入框又消失的问题
      if (target.className === 'edit') {
        const oEditing = tempLi.querySelector('.edit');
        tempLi.classList.add('editing');
        oEditing.focus();
        return;
      }
      todosStorage.set(todos);
      render(todos);

    }, 300);
  })

  // 编辑事项
  oTodoList.addEventListener('dblclick', function (e) {
    // 如果300ms以内又有点击事件，则是双击事件，清掉前面定时器要执行的代码，执行双击对应的代码。
    clearTimeout(timer);
    const target = e.target;
    console.log(target);
    const tempLi = target.closest('li');
    const todo = todos.find(item => item.id == tempLi.id);
    if (target.tagName === 'LABEL') {
      const oEditing = tempLi.querySelector('.edit');
      tempLi.classList.add('editing');
      oEditing.focus();
      // 把输入框的光标放在最后面。
      // element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
      // 如果希望全选输入元素中的文本，你可以使用 HTMLInputElement.select() 方法。
      oEditing.setSelectionRange(-1, -1);
      // 存储输入框以前的数据
      const titleBeforeEdit = oEditing.value;
      oEditing.addEventListener('keyup', function (e) {
        console.log(e.key)
        const val = this.value.trim();
        // 编辑完成
        if (e.key === 'Enter') {
          if (val === '') {
            delTodo(todo);
          } else {
            todo.title = val;
          }
          todosStorage.set(todos);
          render(todos);
        }
        // 取消编辑
        if (e.key === 'Escape') {
          this.value = titleBeforeEdit;
          render(todos);
        }
      })
      // 失去焦点的时候，编辑完成
      oEditing.addEventListener('blur', function () {
        const val = this.value.trim();
        if (val === '') {
          delTodo(todo);
        } else {
          todo.title = val;
        }
        todosStorage.set(todos);
        render(todos);
      })

    }
  })

  // 删除完成的事项
  oClearCompleted.addEventListener('click', function () {
    todos = todos.filter(todo => !todo.completed);
    todosStorage.set(todos);
    render(todos);
  })

  // 点击全选复选框，对所有事项的状态切换
  oToggleAll.addEventListener('change', function () {
    const val = this.checked;
    for (const todo of todos) {
      todo.completed = val;
    }
    todosStorage.set(todos);
    render(todos);
  })

  // 根据hash切换a的状态
  // 不能点击a的时候获取hash，否则获取的是上一个hash值。
  window.onhashchange = function () {
    // console.log(location.hash);
    // a被选中的状态
    selectedType();
    render(todos);
  }

  // 找对象的函数
  function $(selector) {
    return document.querySelector(selector);
  }

  function $$(selector) {
    return document.querySelectorAll(selector);
  }

  // 渲染事项
  function render(todos) {
    // 对面板的切换
    if (todos.length) {
      oMain.style.display = 'block';
      oFooter.style.display = 'block';
    } else {
      oMain.style.display = 'none';
      oFooter.style.display = 'none';
    }
    if (!todos.length) {
      return;
    };
    let renderTodos = [];
    // 筛选数据
    // console.log(location.hash);
    switch (location.hash) {
      case '#/active':
        renderTodos = todos.filter(todo => !todo.completed);
        break;
      case '#/completed':
        renderTodos = todos.filter(todo => todo.completed);
        break;
      default:
        renderTodos = todos;
        break;
    }
    // a的被选中状态
    selectedType();

    let str = '';
    for (const obj of renderTodos) {
      str += `<li id='${obj.id}' class=${obj.completed ? 'completed' : ''}>
      <div class="view">
        <input class="toggle" type="checkbox" ${obj.completed ? 'checked' : ''}>
        <label>${obj.title}</label>
        <button class="destroy"></button>
      </div>
      <input class="edit" value="${obj.title}">
    </li>`
    }
    oTodoList.innerHTML = str;

    // 得到未完成的事项的个数。
    const remainingCount = getRemainingCount(todos);

    // 状态栏 未完成数量的显示
    oTodoCount.innerHTML = `<strong>${remainingCount}</strong> ${remainingCount === 1 ? 'item' : 'items'} left`

    // 删除完成事项的按钮
    // 如果事项的总个数大于未完成事项的个数，则按钮显示
    oClearCompleted.style.display = todos.length > remainingCount ? 'block' : 'none';

    //对全选复选框的状态设置
    if (remainingCount === 0 && todos.length !== 0) {
      oToggleAll.checked = true;
    } else {
      oToggleAll.checked = false;
    }
  }

  // 未完成的事项的个数
  function getRemainingCount(todos) {
    return todos.filter(item => !item.completed).length;
  }


  // 添加事项
  function addTodo() {
    let value = newTodoInput.value.trim();
    if (!value) return;
    todos.push({ id: Date.now(), title: value, completed: false });
    newTodoInput.value = '';
  }
  // 删除单个事项
  function delTodo(todo) {
    const index = todos.indexOf(todo);
    if (index !== -1) {
      todos.splice(index, 1);
    }
  }

  // 事项类别状态设置
  function selectedType() {
    oTodoType.forEach((item, index) => {
      if (item.hash === location.hash) {
        oTodoType.forEach(item => item.classList.remove('selected'));
        item.classList.add('selected');
        // console.log(item.hash);
      }
    })
  }

继续阅读《用ES6写了一个todos，本地任务清单！》的全文内容...

分类: JavaScript案例集 | Tags: todoMVC，todos，本地任务清单，ES6， | 添加评论(0)

还没有评论，您来说两句？

JavaScript(ES6)的常用特性！(下) (2023-07-20)
JavaScript(ES6)的常用特性！(上) (2023-07-18)

JavaScript(ES6)的常用特性！(下)

Thu, 20 Jul 2023 17:25:06 +0800

现在几乎都是使用ES6了，浏览器要兼容的时代随着移动端的统一归于平静，想起以前轰轰烈烈的浏览器大战，为了兼容性痛苦不堪的年代，这一切都过去了。况且随着脚手架等自动化构建工具的使用，直接写最新最酷的代码，再babel一下，放心大胆的用。

所以，我也建议直接用最新版本的语法，不管是语法糖，还是效率，用起来都更舒心。

1、Symbol

ES6为JavaScript引入了一个新的原生类型：Symbol，但是，和其他原生数据类型不一样，symbol没有字面量形式。作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。

下面是创建Symbol的过程：

var sym = Symbol('something')；
console.log(typeof sym); //symbol
console.dir(Symbol)

注意事项：

不能也不应该对Symbol()使用new。它不是一个构造器，也不会创建一个对象。
传给Symbol(...)的参数是可选的，如果传入了的话，应该是一个为这个symbol的用途给出用户友好描述的字符串。
typeof的输出是一个新的值"symbol"，这是识别symbol的首选方法。

两个Symbol永远不会相等

console.log(Symbol('name') === Symbol('name')); // false

1.1 为对象添加私有成员

利用Symbol不重复的特性，可以为对象添加不重复的键名。

每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型的目的。

//使用 Symbol 为对象添加不重复的键

const obj = {}
obj[Symbol()] = '123'
obj[Symbol()] = '456'
console.log(obj)

//也可以在计算属性名中使用

const obj = {
  [Symbol()]: 123
}
console.log(obj)

利用两个Symbol不相等的特性，可以为对象创建私有成员，外部不能访问。

const axisName = Symbol('obj的别名');
const obj = {
    // 利用这种方式可以创建私有成员，外部不能访问
    [Symbol('obj的id')]: 1,
    [Symbol('obj的name')]: 'obj',
    [axisName]: 'myObj',
    url: 'http://www.xxx.com'

}
// 外部不能访问，因为没有两个Symbol是一样的。
console.log(obj[Symbol('obj的id')]);
console.log(obj[axisName]);
console.log(obj.url);

常规的方式不能获取Symbol属性名

// for...in遍历不出Symbol，仅包含了以字符串为键的属性
for(const key in obj){
    console.log(key)
}
// 也不能返回Symbol，仅包含了对象自身的、可枚举的、以字符串为键的属性
console.log(Object.keys(obj))
// 当使用 JSON.stringify() 时，以 symbol 值作为键的属性会被完全忽略：
console.log(JSON.stringify(obj))

ES6的Object专门提供了一个方法用于获取对象的Symbol属性。

//其包含的是以 Symbol 为键的属性
console.log(Object.getOwnPropertySymbols(obj)); //[Symbol(obj的id), Symbol(obj的name), Symbol(obj的别名)]

1.2 内置的Symbol属性

除了自己创建的 symbol，JavaScript 还内建了一些在 ECMAScript 5 之前没有暴露给开发者的 symbol，它们代表了内部语言行为。它们可以使用以下属性访问：

1、迭代 symbols Symbol.iterator

一个返回一个对象默认迭代器的方法。被 for...of 使用。

object默认没有这个迭代属性，所以不能使用for...of，但是可以自己定义

//通过数组可以观察这个迭代器
const arr = [1, 2, 3];
console.log(arr[Symbol.iterator]); // f()
const it = arr[Symbol.iterator](); //{next: f(){}}
console.log(it.next()); //{value: 1, done: false}
console.log(it.next())
console.log(it.next())
console.log(it.next()); //{value: undefined, done: true}

const myObj = {
    name: '诸葛',
    age: 18,
    address: '卧龙岗',
    [Symbol.iterator]: function () {
        const _this = this;
        let num = 0;
        const keys = Object.keys(_this);
        return {
            next: function () {
                return {
                    value: _this[keys[num++]],
                    done: num > keys.length
                }
            }
        }
    }
}
//现在可以使用for...of迭代obj了
for(const value of myObj){
    console.log(value);
}

2、Symbol.replace

一个替换匹配字符串的子串的方法。被 String.prototype.replace() 使用。

3、Symbol.split

一个在匹配正则表达式的索引处拆分一个字符串的方法.。被 String.prototype.split() 使用。

2、Set数据结构

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set对象是值的集合，Set 中的元素只会出现一次，即 Set 中的元素是唯一的。

NaN 和 undefined 都可以被存储在 Set 中，NaN 被视为相同的值（NaN 被认为是相同的，尽管 NaN !== NaN）。

2.1 创建一个set数据结构的实例

//Set 构造函数能创建 Set 对象实例
const mySet = new Set(); // Set(0) {size: 0}

参数iterable 可选，如果传递一个可迭代对象，它的所有元素将不重复地被添加到新的 Set 中。如果不指定此参数或其值为 null，则新的 Set 为空，返回一个新的 Set 对象。

const mySet1 = new Set([1,2,2,3,3,4,5]);
console.log(mySet1);//Set(5) {1, 2, 3, 4, 5}

2.2 实例的方法

2.2.1 添加add(value)

如果 Set 对象中没有具有相同值的元素，则 add() 方法将插入一个具有指定值的新元素到 Set 对象中。并返回Set 对象本身，因此可以链式调用。

const mySet = new Set();
mySet.add(1).add(true).add('Tom').add(18)
console.log(mySet); //Set(4) {1, true, 'Tom', 18}

2.2.2 移除某个值delete(value)

delete() 方法从 Set 对象中删除指定的值（如果该值在 Set 中）。

成功删除返回 true，否则返回 false。

console.log(mySet.delete('Tom')); // true
console.log(mySet.delete('daisy'));//false

从Set中删除对象。

因为对象是通过引用比较的，所以如果没有对原始对象的引用，就必须通过检查单个属性来删除它们。

const setObj = new Set();
setObj.add({ x: 5, y: 20 }).add({ x: 20, y: 30 });
// 删除任何x > 10 的对象 
setObj.forEach(point => {
    if (point.x > 10) {
        setObj.delete(point);
    }
})
console.log(setObj)

2.2.3 移除所有元素 clear()

clear() 方法移除 Set 对象中所有元素。返回值为undefined.

mySet.clear()

2.2.4 has(value)

has() 方法返回一个布尔值来指示对应的值是否存在于 Set 对象中。

const setObj = new Set();
setObj.add({ x: 5, y: 20 }).add({ x: 20, y: 30 }).add('circle');
console.log(setObj.has({ x: 20, y: 30})); // false,不是一个对象的引用
console.log(setObj.has('circle')); //true

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

2.3 实例的属性

size 属性将会返回 Set 对象中（唯一的）元素的个数。

size 的值是一个整数，表示 Set 对象有多少条目。size 的 set 访问函数是 undefined；你不能改变这个属性。也就是只能读不能写。

2.4 遍历

2.4.1 forEach()

forEach() 方法对 Set 对象中的每个值按插入顺序执行一次提供的函数。

 setObj.forEach(item => console.log(item))

2.4.2 for ... of

for(const item of setObj){
    console.log(item);
}

2.5 应用场景

2.5.1 和数组的转换

// 数组去重
const arr = [1,1,2,2,3,3,4,5];
//const newArr = Array.from(new Set(arr));
const newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3, 4, 5]

2.5.2 和字符串相关

let str1 = 'javascript';
let str2 = 'JAvaScript';
let s1 = new Set(str1);
let s2 = new Set(str2);
//大小写敏感
console.log(s1); //Set(9) {'j', 'a', 'v', 's', 'c', …}
console.log(s2); //Set(10) {'J', 'A', 'v', 'a', 'S', …}

3、Map数据结构

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

3.1 对键值的操作

// 创建一个map实例
const myMap = new Map();
// 这种方式赋值不能改变map的数据结构，所以不推荐
// myMap.name = 'mrszhao';
// 正确的方式，使用set方法
myMap.set('name', 'mrszhao');
myMap.set('age', 18);
myMap.set('city', '成都');
myMap.set('city', '重庆');
// 使用get方法获取键的值
console.log(myMap.get('city'));
// size属性获取键值对的数量
console.log(myMap.size);
// 删除键值对，返回布尔值
myMap.delete('age');
// 判断知否存在某个键，返回布尔值
console.log(myMap.has('name'))
console.log(myMap);

注意：键名具有唯一性，重复设置，后面的值会覆盖前面的值，而且，键值对是根据设置的顺序保存的。

3.2 键名可以是任意的数据类型

object对象的键名只能是string和symbol，而map数据的键名可以是任意数据类型，包括复杂数据类型。

//对象的键名会被转成字符串，对象转成字符串是[object Object]
const obj = {
    [Symbol()]: 'mrszhaoObj',
    name: '诸葛',
    1: 1,
    true: true,
    [{a: 1}]: 'a'
}
console.log(obj);
obj[{b: 1}] = 'b';
console.log(Object.keys(obj))
console.log(obj['[object Object]'])

map的优势在于可以使用对象作为键名。

const o = {b: 2};
myMap.set({a: 1}, 'a');
myMap.set(o, 'b');
myMap.set(function a(){} , 1);
myMap.set(true, 1);
//对象的key只能出现一次  要用对象来设键名的时候，一定要在外面设变量
// 因为{} === {} false
console.log(map.get({a: 1})); //undefined
console.log(map.get(o)); // 'b'

3.3 map的遍历

// 第一个参数是value,第二个参数是key
 myMap.forEach((value, key) => console.log(key, value));

因为拥有迭代器属性，可以使用for...of

// 遍历出来的item是一个包含key和value的数组
// 使用数组的解构方式
for(const [key, value] of myMap){
    console.log(key, value)
}

//只遍历键名。myMap.keys()返回一个有迭代器的对象，所以可以用for...of
for(const key of myMap.keys()){
    console.log(key)
}
// 只遍历值
for(const value of myMap.values()){
    console.log(value)
}

3.4 map和数组的转换

const arrMap = [['key1', 'value1'], ['key2', 'value2']];
//使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象
const myMap1 = new Map(arrMap);

// const newArr = Array.from(myMap1);
//最简单的是使用...扩展运算符展开对象，再放入数组。
   const newArr = [...myMap];

更多Map和Object对象的差别，可以查看文档：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

4、Object相关

4.1 Object.assign()

Object.assign(target, ...sources)

Object.assign() 方法将所有可枚举（Object.propertyIsEnumerable() 返回 true）的自有（Object.hasOwnProperty() 返回 true）属性从一个或多个源对象复制到目标对象，返回修改后的对象。

如果目标对象与源对象具有相同的 key，则目标对象中的属性将被源对象中的属性覆盖，后面的源对象的属性将类似地覆盖前面的源对象的属性。

const target = {
    a: 1,
    b: 2
}
const source1 = {
    a: 2,
    c: 3
}
const source2 = {
    a: 3,
    d: 4
}
const result = Object.assign(target, source1, source2);
console.log(result, result === target);

点击空白页面产生小球，点击小球删除自己。试试。看到空白页面使劲点。

    function Circle(option) {
      option = option || {};
      this.shape = {
        r: 30,
        bgColor: '#f60',
        x: 0,
        y: 0
      }
      Object.assign(this.shape, option);
    }
    Circle.prototype.removeCircle = function() {
      console.log('我被干掉了');
    }

    const oHTML = document.documentElement;
    oHTML.addEventListener('click', function (e) {
       var circle = new Circle({
        r: getRandom(20, 50),
        bgColor: `rgba(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)}, ${Math.random()})`,
        x: e.x,
        y: e.y,
      })
      console.log(circle);
      const oDiv = document.createElement('div');
      oDiv.style.cssText = `width:${circle.shape.r * 2}px;height:${circle.shape.r * 2}px;background-color:${circle.shape.bgColor};border-radius:50%;position:absolute;left:${circle.shape.x - circle.shape.r}px;top:${circle.shape.y - circle.shape.r}px;transition:0.2s`;
      document.body.appendChild(oDiv);
      oDiv.addEventListener('click', function(e) {
        this.remove();
        circle.removeCircle();
        e.stopPropagation();
      })
    })
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

4.2 Object.is()

Object.is() 方法判断两个值是否为同一个值。

Object.is(value1, value2);

Object.is的判断规则和==和===都不同。

console.log(Object.is(+0, -0), +0 === -0); // false true
console.log(Object.is(NaN, NaN), NaN === NaN); //true false
console.log(Object.is(undefined, null), undefined == null); //false true

4.3 Object.create()

Object.create() 方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）。

比如下面这个案例，点击页面产生一个圆，点击圆本身，会弹出它的面积。试试。

核心代码：

// 创建一个大类 圆，有半径，x坐标, y坐标三个属性
    function Circle(r = 20, x = 0, y = 0) {
      this.r = r;
      this.x = x;
      this.y = y;
    }
    // 有一个原型上的获取面积的方法
    Circle.prototype.getArea = function () {
      return Math.floor(Math.PI * (this.r ** 2));
    }
    // 创建一个子类，产生有背景颜色的圆
    function BgcolorCircle(bgcolor = '#000') {
      this.bgcolor = bgcolor;
      // 执行大类的构造函数，让子类也有这三个属性，并且有默认值
      Circle.call(this);
    }
    // 把大类的原型对象当作小类的原型对象的原型，小类的实例也可以访问大类原型上的方法
    BgcolorCircle.prototype = Object.create(Circle.prototype);
    // 如果不指定构造函数，会默认指向Circle上级对象
    BgcolorCircle.prototype.constructor = BgcolorCircle;
    
    const oHTML = document.documentElement;
    oHTML.addEventListener('click', function (e) {
      const cc = new BgcolorCircle();
      cc.r = getRandom(10, 100);
      cc.x = e.x;
      cc.y = e.y;
      cc.bgcolor = `rgba(${getRandom(70, 255)},${getRandom(70, 255)},${getRandom(70, 255)})`;
      const oDiv = document.createElement('div');
      oDiv.style.cssText = `width: ${cc.r * 2}px;height:${cc.r * 2}px;position:absolute;left:${cc.x - cc.r}px;top:${cc.y - cc.r}px;background-color: ${cc.bgcolor};border-radius:50%`;
      document.body.appendChild(oDiv);
      oDiv.addEventListener('click', function (e) {
        alert(`我的面积是：${cc.getArea()}`);
        e.stopPropagation();
      })
    })
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

5、class类

看看Class类这个语法糖有多甜。

5.1 声明类

// 类声明，没有提升，先声明再实例化
class Circle {
    //用于创建和初始化一个由class创建的对象
    constructor(r = 20, x = 0, y = 0) {
        this.r = r;
        this.x = x;
        this.y = y;
    }
    // getter 只读属性
    get area() {
        return this.getArea();
    }
    // 原型方法
    getArea() {
        return (Math.PI * (this.r ** 2)).toFixed(2);
    }
}

const c = new Circle(50);
console.log(c);
console.log(c.area);
console.log(c.getArea());

5.2 静态属性和方法

不能在类的实例上调用静态方法，而应该通过类本身调用。

// 类声明，没有提升，先声明再实例化
class Circle {
    //用于创建和初始化一个由class创建的对象
    constructor(r = 20, x = 0, y = 0) {
        this.r = r;
        this.x = x;
        this.y = y;
    }
    // getter 只读属性
    get area() {
        return this.getArea();
    }
    // 静态属性，只有类能访问，实例不能访问
    static proname = 'Circle';
    // 原型方法
    getArea() {
        return (Math.PI * (this.r ** 2)).toFixed(2);
    }
    // 静态方法
    static createDefaultCircle() {
        return new Circle();
    }
}
// 只能类访问静态属性和静态方法
console.log(Circle.proname);
console.log(Circle.createDefaultCircle());

5.3 extends扩展子类

extends 关键字用于类声明中，以创建一个类，该类是另一个类的子类。

class ChildClass extends ParentClass { ... }

// 使用extends扩展内置对象,产生一个内置对象的子类
class myDate extends Date {
    constructor(date = new Date()) {
        // super 关键字用于调用对象的父对象上的函数。
        // 调用超类构造函数并执行。相当于Circle.call(this);
        // 并把子类的参数传递给父类。
        super(date);
    }
    getFormattedDate() {
        const week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        let date = this.getDate();
        let month = this.getMonth() + 1;
        let year = this.getFullYear();
        date = date < 10 ? '0' + date : date;
        month = month < 10 ? '0' + month : month;
        return `${year}.${month}.${date} ${week[this.getDay()]}`;
    }
} 

const mydate = new myDate();
console.log(mydate.getFormattedDate());
const mydate1 = new myDate('2023-10-1')
console.log(mydate1.getFormattedDate());

扩展Circle的子类对象

class ColorCircle extends Circle {
    constructor(bgcolor = '#000') {
        // 如果子类中定义了构造函数，那么它必须先调用 super() 才能使用 this 。
        super();
        // console.log(super());//返回了子对象，后面才能使用this来指向子对象。
        this.bgcolor = bgcolor;
    }
}

const bgcircle = new ColorCircle('#f30');
console.log(bgcircle);
bgcircle.r = 30;
console.log(bgcircle.area);

class BorderCircle extends Circle {
    constructor(border = '1px solid #000') {
        super();
        this.border =border;
    }
}

const bordercircle = new BorderCircle();
console.log(bordercircle);
bordercircle.border = `5px solid ${bgcircle.bgcolor}`
bordercircle.r = 40;
console.log(bordercircle.area);

现在Class类的写法比起以前原型的复杂写法看起来要清爽很多。

还有一些高级的内容，比如Promise异步、代理等等，后面有时间再写了。

继续阅读《JavaScript(ES6)的常用特性！(下)》的全文内容...

分类: JavaScript教程 | Tags: ES6，Set，Map，Class， | 添加评论(0)

还没有评论，您来说两句？

用ES6写了一个todos，本地任务清单！ (2023-07-22)
JavaScript(ES6)的常用特性！(上) (2023-07-18)

JavaScript(ES6)的常用特性！(上)

Tue, 18 Jul 2023 17:38:17 +0800

这个版本算是JavaScript划时代的一个升级了，从ES3、ES5、ES6，为什么没有ES4，其实ES5和ES6加起来就是曾经因为跨度太大导致流产的ES4.

这个版本升级的力度很大，有了很多新东西，需要好好掌握。

1、ES6介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。

因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

2、块作用域声明

在ES6以前，只有全局和函数局部作用域，需要创建局部作用域，最普通的方法除了普通的函数声明之外，就是立即调用函数表达式（IIFE）。

var a = 10;
(function IIFE(){
    var a = 20;
    console.log(a);
})();
console.log(a);

2.1 let声明

在ES6中，只需要一对{}就可以创建一个块作用域。

{
    let a = 2;
    if(a > 1){
        let b = a * 3;
        console.log(b); // 6
        for(let i = a; i <= b; i++){
            let j = i + 10;
            console.log(j);
        }
        let c = a + b;
        console.log(c);
    }
}
思考：哪些变量只存在于if语句内部？哪些变量只存在于for循环内部？

2.1.1 var变量提升，let变量暂时性死区

{
    console.log(a); //undefined
    console.log(b); //ReferenceError 临时死亡区(TDZ)
    var a;
    let b;
}

不管是否显性赋值，都不能在let b语句运行之前访问b。

对于TDZ值和未声明值(以及声明过的)，typeof结果是不相同的。

{
    //a未声明
    if(typeof a === 'undefined'){
        console.log('变量没有声明');
    }
    //b声明了，但是还处于TDZ
    if(typeof b === 'undefined'){
        //ReferenceError
    }
    let b;
}

这里a是未声明的，所以typeof是检查它是否存在的唯一安全的方法，而typeof b 会抛出TDZ错误，因为代码后面有一个let b 声明。

2.1.2 let + for

var funcs = [];
for (var i = 0; i < 5; i++) {
      funcs.push(function () {
          console.log(i);
      });
}
funcs[0](); // 5
funcs[1](); // 5

//let 方法

var funcs = [];
for (let i = 0; i < 5; i++) {
      funcs.push(function () {
          console.log(i);
      });
}
funcs[0](); // 0
funcs[1](); // 1

for循环头部的let i 不只为for循环本身声明了一个i，而是为循环的每一次迭代都重新声明了一个新的i。这意味着循环迭代的函数会封闭一个新的i。

等同于如下代码的功能：

var funcs = [];
for (var i = 0; i < 5; i++) {
    let j = i;
      funcs.push(function () {
          console.log(j);
      });
}
funcs[0](); // 0
funcs[1](); // 1

let放在for...in和for...of循环中也是一样的。

2.2 const声明

用于创建常量。

常量是一个设定了初始值之后就只读的变量。

这个变量的值在声明时设定之后就不允许改变。const声明必须要有显式的初始值。

const PI = 3.14;
const a = undefined; // 如果需要一个值为undefined的常量，就要声明并初始化。
console.log(PI);// 3.14
PI = 3.1415926; // TypeError

常量不是对这个值本身的限制，而是对赋值的那个变量的限制。

这个值并没有因为const被锁定或者不可变，只是赋值本身不可变。

如果这个值是复杂值，比如数组或者对象，其内容仍然是可以修改的。

const a = [1,2];
a.push(3);
console.log(a); // [1,2,3]
a = 10; // TypeError

变量a持有一个指向数组的地址引用，数组本身是可以改变的，只是这个地址引用不可以变化。

将一个对象或数组作为常量赋值，意味着这个值在这个常量的词法作用域结束之前不会被垃圾回收，因为指向这个值的引用没有清除。所以如果不想出现这种情况，最好不要用常量指向复杂数据类型。

2.3 块作用域函数

从ES6开始，块内声明的函数，其作用域在这个块内。

{
    foo(); //可以调用
    function foo(){
        // ...
    }
}
foo(); // ReferenceError

要注意以下这种行为，在ES6中会报错

if(something){
    function foo(){
        console.log('1');
    }
}else{
    function foo(){
        console.log('2');
    } 
}
foo(); // 在ES6以前，不管something是什么，foo()都会打印2，因为两个函数声明都会被提升到块外面，第二个总是会覆盖前面的函数声明。在ES6中，最后一行会抛出ReferenceError

3、spread/rest

ES6引入的新运算符...，通常称为spread或rest(展开或收集)运算符，取决于它在哪里如何使用。

function foo(x,y,z){
    console.log(x,y,z);
}
foo(...[1,2,3]);

let arr = [1,2,3];
// 老方法，用apply实现，数组可以作为参数。
// let oNull = Object.create(null);
// console.log(Math.max.apply(oNull,arr));
// 当...用在可以被遍历的对象前，比如数组，它会把这个变量展开spread为各个独立的值。
let max = Math.max(...arr);
console.log(max);

还可以在其他上下文中用来展开一个值，比如：

let a = [1,2,3];
let b = ['a',...a,'b'];
console.log(b); //['a', 1, 2, 3, 'b']
// 老方法，用concat合并数组。
console.log(['a'].concat(a,'b'));

除了spread展开之外，还可以反向操作，把一系列值收集到一起成为一个数组。

//z表示：把剩下的参数收集到一起组成一个名为z的数组
function foo(x,y,...z){
    console.log(x,y,z);
}
foo(1,2,3,4,5); // 1 2 [3,4,5]

如果没有命名参数的话，就会收集所有的参数：

//这里的...表示收集,可以叫做rest参数，表示收集其余的参数。
function foo(...args){
    // 老方法，获得除第一个后面所有的参数
    console.log(Array.prototype.slice.call(arguments,1));
    // 新方法
    console.log(args.slice(1));   
    console.log(args); //[1, 2, 3, 4]
    //这里的...表示扩展，把数组扩展成单个的值。这里很好的展示了...运算符对称而又相反的用法。
    console.log(...args); //1 2 3 4
}
foo(1,2,3,4);

4、默认参数值

当函数的参数可以缺省的时候，需要设置一个默认的值。

function foo(x, y) {
    //这种默认值设置，当参数可以为0的时候会出错。
    x = x || 10;
    y = y || 20;
    return x + y;
}
console.log(foo());
// 当x为0的时候，会出错，因为 0 || 10 ,会返回10
console.log(foo(0, 10));
console.log(foo(10))

// 修正参数可以为0的时候,也意味着除了undefined之外的任何值都可以传入。
// 如果传入undefined，在这里还是表示该参数缺省。
function foo(x, y) {
    x = (x !== undefined) ? x : 10;
    y = (y !== undefined) ? y : 20;
    return x + y;
}
console.log(foo());
console.log(foo(0, 10));
console.log(foo(10));
// 表示第一个参数缺省。
console.log(foo(undefined,10)); // 20

//但是如果参数需要传递undefined ，可以通过它不存在于arguments中来确定这个参数是否被省略。
function foo(x,y){
    console.log(arguments);
    // 这里 in 表示属性是否存在于对象中，0表示的是下标。
    x = (0 in arguments) ? x : 10;
    y = (1 in arguments) ? y : 20;
    return x + y;
}
console.log(foo()); // 30
console.log(foo(10,undefined)); // NaN

// 但是如果不能传递任何值，甚至undefined也不行，来表明“我省略了这个参数”，那么如何省略第一个参数呢？
// foo(,10)这是不合法的语法，而在函数参数中，undefined和缺失是无法区分的
// 所以，只能缺省右侧的参数，而不能省略位于参数列表中间或者起始处的参数。
// ES6新增了一个有用的语法来改进为缺失参数赋默认值的流程。
// 这里的x = 10更像是x !== undefined ? x : 10
function foo(x = 10,y = 20){
    return x + y;
}
console.log(foo()); // 30
console.log(foo(5)); // 25
console.log(foo(0,10)); // 10
console.log(foo(5,undefined)); // 25 ，丢掉undefined，用默认值
console.log(foo(5,null)); // null转成了0
console.log(foo(undefined,5)); // 15 ，undefined转成默认值。
console.log(foo(null,5)); // 5
console.log(foo(null,undefined)); // 20
console.log(foo('',undefined)); // '20'
console.log(foo(' ',undefined)); // ' 20'
console.log(foo(true,undefined)); // 21 true被强制转成1
console.log(foo(true,false)); // 1 true被强制转成1，false强制转成0

5、解构

ES6引入了一个新的语法特性，名为解构（destructuring）,把这个功能看作是一个结构化赋值（structured assignment）方法。

以前的手动赋值方法：

function foo() {
    return [1, 2, 3];
}
let temp = foo();
//手动赋值
let a = temp[0], b = temp[1], c = temp[2];
console.log(a, b, c);

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let tmp = bar();
//手动赋值
let x = tmp.x, y = tmp.y, z = tmp.z;
console.log(x, y, z)

可以把将数组或者对象属性中带索引的值手动赋值看做结构化赋值。

ES6为解构新增了一个专门语法，专用于数组解构和对象解构。

这个语法消除了前面代码中对临时变量tmp的需求，使代码简洁更多。

function foo() {
    return [1, 2, 3];
}
function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let [a, b, c] = foo();
let { x: x, y: y, z: z } = bar();
console.log(a, b, c);
console.log(x, y, z);

5.1 对象属性赋值模式

当对象的属性名和要赋值的变量名相同，语法还可以更简洁一些：

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let { x,y,z } = bar();
console.log(x, y, z);

省略了x:这个部分，如果有需要把属性赋值给非同名变量，则：

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let { x: bam, y: baz, z: bap } = bar();
console.log(bam,baz,bap);

在对象字面量或者常规的赋值语句中，都是target:source模式，或者说是：property-alias( 属性别名 ):value模式。

但是在对象解构赋值的时候，反转了target:source模式。变成了source:target。

let aa = 10; bb = 20;
// 对象字面量是target:source模式
let o = { x: aa, y: bb };
// 对象解构赋值是source:target模式
// 如果省略了x: ，相当于把aa的值赋值给了AA，bb的值赋值给了BB。
// 对称性可以帮助解释为什么ES6这个语法模式进行了反转，虽然脑子有点不习惯。
let { x: AA, y: BB } = o;
console.log(AA, BB); // 10 20

可以不用临时变量解决“交换两个变量”这个经典问题：

let x = 10, y = 20;
// 老方法
// let temp = 0;
// temp = x;
// x = y;
// y = temp;
// console.log(x,y); // 20 10
// 新方法
[y,x] = [x,y];
console.log(x,y); // 20 10

5.2 重复赋值

对象解构形式允许多次列出同一个源属性。

let {a:x,a:y} = {a:1};
console.log(x,y);

5.3 缺省

对于数组解构赋值和对象解构赋值，不需要把存在的所有值都用来赋值。

function foo() {
    return [1, 2, 3];
}
function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
// 因为数组是按照顺序解构的，所以第一个值不要的时候，还是要有占位。
let [,b] = foo();
let {x,z} = bar();
console.log(b,x,z); // 2 4 6

当然，如果超过了可以解构的值，多余的值会被赋为undefined.

function foo() {
    return [1, 2, 3];
}
function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let [,,c,d] = foo();
let {w,z} = bar();
console.log(c,d,w,z); // 3 undefined undefined 6

这个特性也是符合“undefined就是缺失”的原则。

...运算符也可以执行解构赋值同样的操作：

function foo() {
    return [1, 2, 3];
}
// ...b收集了其余的值，组成一个数组。
// 在ES6中还没有通过...展开和集合对象的特性。
let [a,...b] = foo();
console.log(a,b); //1 [2, 3]

5.4 默认值解构

使用和前面函数参数默认值类似的=语法，解构也可以提供一个用来赋值的默认值。

function foo() {
    return [1, 2, 3];
}
function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let [a = 0, b = 0, c = 0, d = 4] = foo();
console.log(a, b, c, d); // 1 2 3 4

let { x = 0, y = 0, z = 0, w = 10 } = bar();
console.log(x, y, z, w); // 4 5 6 10

或者，属性名和变量名不同的时候：

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}
let { x, y, z, w: WW = 20 } = bar();
console.log(x, y, z, WW); //4 5 6 20

5.5 嵌套解构

如果解构的值中有嵌套的对象或者数组，也可以解构这些嵌套的值：

let a1 = [1, [2, 3, 4], 5];
let o1 = { x: { y: { z: 6 } } };
let [a, [b, c, d], e] = a1;
let { x: { y: { z: w } } } = o1;
console.log(a,b,c,d,e); // 1 2 3 4 5
console.log(w); // 6

把嵌套解构当作一种展平对象名字空间的简单方法 .

let App = {
    model: {
        User: function () {//...}
        }
    }

}
// 老方法
let User = App.model.User;
// 新方法
let { model: { User } } = App;

const APP = {
    methods: {
        say1() {
            return 'hello';
        },
        say2() {
            return 'world';
        }
    }

}
console.log(APP.methods.say1());
console.log(APP.methods.say2());

// const say1 = APP.methods.say1;
// const say2 = APP.methods.say2;
// console.log(say1());
// console.log(say2());

const { methods: { say1 }, methods: { say2 } } = APP;
console.log(say1());
console.log(say2());

const APP = {
    say1() {
        return 'hello';
    },
    say2() {
        return 'world';
    }
}
const { say1, say2 } = APP;
console.log(say1());
console.log(say2());

6、对象字面量扩展

ES6为普通{}对象字面量新增了几个重要的便利扩展。

6.1 简洁属性

var x = 2,y = 3,
    o = {
        x:x,
        y:y
    }

当需要定义一个与某个标识符同名的属性的时候，可以把x:x简写成x。

var x = 2,y = 3,
    o = {
        x,
        y
    }

6.2 简洁方法

关联到对象字面量属性上的函数也有简洁形式。

var o = {
    x:function(){
        //...
    },
    y:function(){
        //...
    }
}

在ES6中可以简写：

var o = {
    x(){
        //...
    },
    y(){
        //...
    }
}

这种简洁方式都是使用了匿名函数表达式，所以针对需要递归，需要函数的词法标识符的时候就不可取了。

const obj = {
    getSum: function getSum(num) {
        if (num === 1) {
            return 1;
        }
        return num + getSum(num - 1);
    }
}
console.log(obj.getSum(5))

比如下面的这段代码：产生两个随机数字，然后用大的减去小的。

function run(o) {
    var x = getRandom(0, 100);
    var y = getRandom(0, 100);
    console.log(`x:${x},y:${y}`);
    // console.log(o.calc.name);
    //通过o.属性名来调用函数，是函数的公开名称
    return o.calc(x, y);
}
let result = run({
    calc: function calc(x, y) {
        if (x > y) {
        //递归，调用函数本身，calc是函数自身的词法标识符，不是对象的属性名称。用于在其自身内部递归调用函数。
            return calc(y, x);
        }
        return y - x;
    }

})
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(result);

如果把上面的代码进行ES6简洁：

let result = run({
    calc(x, y) {
        if (x > y) {
            //这种ES6的简洁形式，失去了函数本身的词法标识符，就不能递归调用自身了。会报ReferenceError错误。
            return calc(y, x);
        }
        return y - x;
    }
})

这段ES6的代码会被解释成：

let result = run({
    calc: function (x, y) {
        if (x > y) {
            //这时候calc作为属性就不能这样使用了。
            return calc(y, x);
        }
        return y - x;
    }
})

所以对于简洁方法应该只在不需要它们执行递归或者事件绑定/解绑定的时候使用。否则的话，还是按照老式的calc:function calc(...)方法来定义吧。

6.3 Getter/Setter

曾经的getter和setter的写法：

//  曾经的getter setter

let obj = {
    id: 10,
}
Object.defineProperty(obj, 'id', {
    get: function () {
        return this._id ++;
    },
    set: function (val) {
        this._id = val;
    }
})
console.log(obj.id); // NaN   undefined++ => NaN
obj.id = 12;
console.log(obj.id); // 12
console.log(obj.id); // 13
console.log(obj.id); // 14

简写形式：

let obj = {
    id: 10,
    get id() {
        return this._id++;
    },
    set id(val) {
        this._id = val;
    }
}

console.log(obj.id); // NaN
obj.id = 12;
console.log(obj.id); // 12
console.log(obj.id); // 13
console.log(obj.id); // 14

7、插入字符串字面量（模板字面量）

使用`作为界定符，这样的字符串字面值支持嵌入基本的字符串插入表达式，会被自动解析和求值。

let name = '诸葛亮';
// 用``来包围，会被解释为一个字符串字面量，其中任何${}形式的表达式都会被立即在线解析求值。
// 这种形式的解析求值就是插入（比模板要精确一些）
let greeting = `Hello,${name}`;
console.log(greeting)

插入字符串字面量的一个优点就是可以分散在多行：

let name = '诸葛亮';
// 用``来包围，会被解释为一个字符串字面量，其中任何${}形式的表达式都会被立即在线解析求值。
// 这种形式的解析求值就是插入（比模板要精确一些）
let greeting = `Hello,${name},
你是我的偶像，羽扇纶巾，运筹帷幄之中，决胜千里之外，鞠躬尽瘁，死而后已！`;
console.log(greeting)

7.1 插入表达式

在${...}内可以出现任何合法的表达式，包括函数调用、在线函数表达式调用、设置其它插入字符串字面量

function getUpper(str){
    return str.toUpperCase();
}

let name = 'daisy';
let str = `Hello,${getUpper(name)}`;
console.log(str)

8、箭头函数

理解使用普通函数基于this带来的困扰，这是新的ES6箭头函数=>特性引入的主要动因。

箭头函数定义包括一个参数列表（零个或多个参数，如果参数个数不是一个的话要用(...)包围起来），然后是标识=>，函数体放在最后。

function foo(x,y){
    return x + y;
}
//箭头函数
var foo = (x,y) => x + y;

只有在函数体的表达式个数多于1个，或者函数体包含非表达式语句的时候才需要用{...}包围。

如果只有一个表达式，并且省略了包围的{...}的话，则意味着表达式前面有一个隐含的return。

var fn1 = () => 12;
var fn2 = x => x * 12;
var fn3 = (x,y) => {
    var z = x * 2 + y;
    y++;
    x *= 3;
    return (x + y + z) / 2
}

箭头函数总是函数表达式，并不存在箭头函数声明。

箭头函数是匿名函数表达式，它们没有用于递归或者事件绑定/解绑定的命名引用。

箭头函数支持普通函数参数的所有功能，包括默认值、解构、rest参数等。

箭头函数的简洁，使得它很适合这种情况：

var a = [1,2];
var result = a.map(v => v * 2);

但是=>箭头函数带来的可读性提升与被转化函数的长度负相关。

函数越长，箭头函数带来的好处就越小，函数越短，箭头函数带来的好处就越大。

所以，更合理的做法是只在确实需要简短的在线函数表达式的时候才采用箭头函数，而对于那些一般长度的函数则无需改变。

不只是更短的语法，而是this。

箭头函数的主要设计目的就是以特定的方式改变this的行为特性，解决this相关的一个特殊而又常见的痛点。

const obj = {
    name: '诸葛亮',
    fn() {
        console.log(this.name);
        //针对定时器的this
        setTimeout(() => {
            console.log(this.name);
        }, 1000)
    }
}

obj.fn();

// 点击按钮，每次加一个1
const oBtn = document.querySelector('button');
var controller = {
    makeRequest: function (num) {
        oBtn.innerText = num;
        num++;
        // 保存this对象
        var _this = this;
        oBtn.onclick = function () {
            // 当有点击事件的调试，让程序在这里进入调试
            // debugger;
            // console.log(this); //oBtn
            // controller.makeRequest(num); //这种方式不安全，有可能对象和标识符的引用关系发生了变化。
            // 通过闭包访问外层函数的变量_this
            _this.makeRequest(num);
        }
    }
}
controller.makeRequest(10);

在箭头函数内部，this绑定不是动态的，而是词法的。

var controller = {
    makeRequest: function (num) {
        oBtn.innerText = num;
        num++;
        oBtn.onclick = () => {
            // 箭头函数内部的this指向外层环境的this。这是词法绑定，这时的this不是动态的。
            this.makeRequest(num);
        }
    }
}

如果想灵活运用this，就不要胡乱使用箭头函数，比如：

var obj = {
    firstName: '诸葛',
    lastName: '孔明',
    fullName() {
        console.log(this)
        return this.firstName + this.lastName;
    },
    sayName() {
        return `Hi, my name is ${this.fullName()}`
    }
}

console.log(window.obj.fullName())
console.log(window.obj.sayName())

var controller = {
    //箭头函数里面的this从包围的作用域中词法继承而来。外围的作用域是全局作用域。
    makeRequest: () => {
        console.log(this);//window
        this.helper(); //报错
    },
    helper: () => {
        console.log(this);
    }
}
//虽然是对象.方法的隐式this绑定方式，但是makeRequest方法是箭头函数，它里面的this不指向这个对象了。
controller.makeRequest();

如果有一个简短单句在线函数表达式，其中唯一的语句是return某个计算出的值，且这个函数内部没有this引用，且没有自身引用（递归、事件绑定/解绑定），且不会要求函数执行这些，那么可以安全地把它重构成箭头函数。

如果有一个内层函数表达式，依赖于在包含它的函数中调用var _this = this或者.bind(this)来确保适当的this绑定，那么这个内层函数表达式应该可以安全地转换为箭头函数。

如果内层函数表达式依赖于封装函数中某种像var args = Array.prototype.slice.call(arguments)来保证arguments的词法复制，那么这个内层函数可以安全转成箭头函数。

所有的其它情况，函数声明、较长的多语句函数表达式、需要词法名称标识符（递归）的函数，以及任何不符合以上几点特征的函数，一般都应该避免箭头函数语句。

继续阅读《 JavaScript(ES6)的常用特性！(上)》的全文内容...

分类: JavaScript教程 | Tags: ES6， | 添加评论(0)

还没有评论，您来说两句？

JavaScript(ES6)的常用特性！(下) (2023-07-20)
用ES6写了一个todos，本地任务清单！ (2023-07-22)

对象属性的访问、遍历、getter和setter等高级特性！

Sun, 16 Jul 2023 16:37:19 +0800

现在都是框架和组件库的天下，很多学生一上来就说要学框架，对于原生代码嗤之以鼻，觉得都是上古时期的内容，枯燥难懂，效率低下，哪有框架用起来直接起飞。

现在前端这个岗位在2023年仿佛冰冻了一样，这段时间整理以前的资料，有时候也觉得干嘛不直接整理自动化构建和框架的内容，还把几年前的老内容放上来。

也许只是个情怀吧，毕竟自己在这上面走了很久的路，算是鞭尸了……

1、对象的属性和方法

如果访问的对象属性是一个函数，大家喜欢使用不一样的叫法以作区分。由于函数很容易被认为是属于某个对象，于是把这种函数称为“方法”。

从技术角度来说，函数永远不会“属于”一个对象，所以把对象内部引用的函数称为对象的方法有点不妥。

虽然函数具有this引用，有时候这些this确实会指向调函位置的对象引用。但是这种用法从本质上并没有把一个函数变成一个对象的“方法”，因为this是在运行时根据调用位置动态绑定的，所以函数和对象的关系最多也只能说是间接关系。

无论对象访问属性返回什么值，每次访问对象的属性就是属性访问，如果属性访问返回的是一个函数，那它也并不是对象的一个“方法”。属性访问返回的函数和其它函数没有任何区别（除了可能发生的隐式绑定this）。

function foo(){
    console.log('foo');
}
var someFoo = foo;
var obj = {
    someFoo:foo
}
foo; // function foo(){...}
someFoo; //function foo(){...}
obj.someFoo; //function foo(){...}

someFoo和obj.someFoo只是对于同一个函数的不同引用，并不能说明这个函数是特别的或者“属性”某个对象。

如果foo()定义时内部有一个this引用，那这两个函数引用的唯一区别就是obj.someFoo中的this会被隐式绑定到一个对象。

即使在对象中声明一个函数表达式，这个函数也不会“属性”这个对象，它们只是对于相同函数对象的多个引用。

var myobj = {
    foo:function(){
        console.log('foo');
    }
}
var someFoo = myobj.foo;
console.log(someFoo); // function foo(...)
console.log(myobj.foo);// function foo(...)

2、对象的复制

2.1 深复制

function anotherFunction(){
    /* ... */
}
var anotherObj = {
    c:true
}
var anotherArr = [];
var myObj = {
    a:2,
    b:anotherObj, // 引用，不是副本
    c:anotherArr, // 引用
    d:anotherFunction //引用
}
anotherArr.push(anotherObj,myObj);

对象之间互相引用，对于深复制来说，会由于循环引用导致死循环。

对于JSON安全的对象来说，有一种巧妙的复制方法：

var newObj = JSON.parse(JSON.stringfy(someObj));

这种方法需要保证对象是JSON安全的，所以只适用于部分情况。

2.2 浅复制

ES6定义了Object.assign()方法来实现浅复制。

该方法的第一个参数是目标对象，后面是一个或者多个源对象。它会遍历一个或多个源对象的所有可枚举(enumerable)的自有键并把它们复制（使用=操作符赋值）到目标对象，最后返回目标对象。

就好像这样：

function anotherFunction(){
            //..
}
var anotherObj = {
    c:true
}
var anotherArr = [];
var myObj = {
    a:2,
    b:anotherObj, // 引用，不是副本
    c:anotherArr, // 引用
    d:anotherFunction //引用
}
anotherArr.push(anotherObj,myObj);


var newObj = Object.assign({},myObj);
console.log(newObj.a);   // 2
console.log(newObj.b === myObj.b);  //true
console.log(newObj.c === myObj.c);  //true
console.log(newObj.d === myObj.d);  //true

3、属性描述符

在ES5之前，JavaScript语言本身并没有提供可以直接检测属性特性的方法，比如判断属性是否是只读。

在ES5之后，所有的属性都具备了属性描述符。

var myObj = {
    a:2
}
var result = Object.getOwnPropertyDescriptor(myObj,'a');
console.log(result); //{value: 2, writable: true, enumerable: true, configurable: true}

这个普通的对象myObj的属性描述符不仅仅只有一个value值2，还包含另外三个特性：writable(可写)、enumerable(可枚举)、configurable(可配置)。

在我们创建普通属性时属性描述符会使用默认值。就等于如下代码：

var myObj = {};
Object.defineProperty(myObj,'a',{
    value:2,
    writable:true,
    configurable:true,
    enumerable:true
});
console.log(myObj.a); // 2

我们可以使用Object.defineProperty()来添加一个新属性，或者修改一个已有属性（如果这个属性是configurable）并对特性进行配置。

3.1 writable

writable决定是否可以修改属性的值。

var myObj = {};
Object.defineProperty(myObj,'a',{
    value:2,
    writable:false, //不可写
    configurable:true,
    enumerable:true
});
console.log(myObj.a); // 2
myObj.a = 3;
console.log(myObj.a); // 2

3.2 configurable

只要属性是可以配置的，就可以使用defineProperty()方法来修改属性描述符。

var myObj = {
    a:2
};
myObj.a = 3;
console.log(myObj.a);//3
Object.defineProperty(myObj,'a',{
    value:4,
    writable:true, 
    configurable:false, //不可配置
    enumerable:true
});
console.log(myObj.a); // 4
myObj.a = 5;
console.log(myObj.a); // 5

Object.defineProperty(myObj,'a',{
    value:6,
    writable:true,
    configurable:true,
    enumerable:true
})  //Uncaught TypeError: Cannot redefine property: a

尝试修改一个不可配置的属性描述符会出错。

把configurable修改成false是单向操作，无法撤销！！

var myObj = {
    a:2
};
myObj.a = 3;
console.log(myObj.a);//3
Object.defineProperty(myObj,'a',{
    value:4,
    writable:true, 
    configurable:false, //不可配置
    enumerable:true
});
console.log(myObj.a); // 4
myObj.a = 5;
console.log(myObj.a); // 5

Object.defineProperty(myObj,'a',{
    value:6,
    writable:false,  // 即使不可配置，还是可以把writable的状态由true改成false，但是无法由false改成true。
    configurable:false, //不可配置
    enumerable:true
})  
console.log(myObj.a); // 6

myObj.a = 7; //不可再修改
console.log(myObj.a); // 6

configurable:false还会禁止删除这个属性：

var myObj = {
    a:2
}
console.log(myObj.a); // 2
delete myObj.a;
console.log(myObj.a); // undefined
Object.defineProperty(myObj,'a',{
    value:3,
    writable:true,
    configurable:false,
    enumerable:true
});
console.log(myObj.a); // 3
delete myObj.a; //失效了，因为属性是不可配置的。
console.log(myObj.a); // 3

delete只用来删除对象的可删除的属性。如果对象的某个属性是某个对象/函数的最后一个引用者，当delete这个属性之后，这个未引用的对象/函数就可以被垃圾回收。

3.3 enumerable

这个属性描述符控制的是属性是否会出现在对象的属性枚举中。

比如说for...in循环，如果把enumerable设置为false，这个属性就不会出现在枚举中，虽然仍然可以正常访问它。

在谷歌调试工具中，不可枚举的属性是淡紫红色，可枚举的属性是深紫红色的。

var myObj = {};
Object.defineProperty(myObj,'a',{
    value:2,
    enumerable:true //让a像普通属性一样可以枚举
})
Object.defineProperty(myObj,'b',{
    value:3,
    enumerable:false, // 让b不可枚举
})
//可访问
console.log(myObj.b); // 3
//b这个属性在myObj对象中是否存在
console.log('b' in myObj); // true
//检测b这个属性是不是myObj自身的属性，而不是继承的属性
console.log(myObj.hasOwnProperty('b')); // true

for(var attr in myObj){
    console.log(attr,myObj[attr]); // a 2 ,b没有被遍历出来
    }

myObj.b可以被访问，确实存在，但是不会出现在for...in循环中，因为只有可枚举的属性才能出现在对象属性的遍历中。

还有一些方法可以区分属性是否可枚举：

var myObj = {};
Object.defineProperty(myObj,'a',{
    value:2,
    enumerable:true,
})
Object.defineProperty(myObj,'b',{
    value:3,
    enumerable:false,
})
console.log(myObj);
// propertyIsEnumerable()检查给定的属性名是否直接存在于对象中（而不是在原型链上）并且满足enumerable:true
console.log(myObj.propertyIsEnumerable('a')); // true
console.log(myObj.propertyIsEnumerable('b')); // false
//返回所有可枚举的属性的数组。只查找对象直接包含的属性，不查找原型链。
console.log(Object.keys(myObj)); //['a']
//返回一个数组，包含所有属性，无论是否可枚举。只查找对象直接包含的属性，不查找原型链。
console.log(Object.getOwnPropertyNames(myObj)); //['a', 'b']

4、遍历

Object.keys(obj)可以返回obj对象自身可遍历的属性的数组。

Object.getOwnPropertyNames(obj) 可以返回对象自身所有属性，包括不可遍历的属性，也是返回数组。

也可以用for循环去遍历对象属性。

for...in可以遍历对象的可枚举属性（包括prototype原型链），无法直接获取属性值，需要手动获取属性值。

4.1 for...in

对于数组来说，使用标准的for循环来遍历值：

let arr = [1,2,3];
for(let i = 0;i < arr.length; i++){
    console.log(arr[i]);
}

ES5中增加了一些数组的辅助迭代器，包括forEach()、every()、some()、map()、filter()、reduce()等。每种辅助迭代器都可以接受一个回调函数并把它应用到数组的每个元素上，唯一的区别就是它们对于回调函数返回值的处理方式不同。

forEach()会遍历数组中的所有值并忽略回调函数的返回值。

every()会一直运行直到回调函数返回false。

some()会一直运行直到回调函数返回true。

不要用for...in遍历数组，因为它不仅遍历数字索引，还会遍历出数组的其它属性。

let arr = [1,2,3];
arr.name = 'myArr';
arr.id = '001';
for(let attr in arr){
    console.log(attr);//'0' '1' '2' 'name' 'id'
}

用for循环或者forEach()这种迭代器，遍历数组下标时采用的是数字顺序，但是遍历对象属性时的顺序是不确定的。在不同的JavaScript引擎中可能不一样。

因此，在任何不同的环境中需要保证一致性时，一定不要相信任何观察到的属性的顺序，它们是不可靠的。

4.2 for...of

ES6增加了一种用来遍历数组的for...of循环语句，可以直接遍历值而不是数组的下标（或者对象的属性，如果对象本身定义了迭代器的话也可以遍历对象）。

let arr = [1,2,3];
for(let val of arr){
    console.log(val);
}

for...of循环首先会向被访问的对象请求一个迭代器对象，然后通过调用迭代器对象的next()方法来遍历所有返回值。

数组有内置的@@iterator,因此for...of可以直接应用在数组上。

使用内置的@@iterator来手动遍历数组，看看它是如何工作的：

let arr = [1,2,3];
//数组的实例有这个属性：Symbol(Symbol.iterator):f values()
let it = arr[Symbol.iterator]();
console.log(it.next()); // {value: 1, done: false}
console.log(it.next()); // {value: 2, done: false}
console.log(it.next()); // {value: 3, done: false}
console.log(it.next()); // {value: undefined, done: true}

使用ES6中的符号Symbol.iterator来获取对象的@@iterator内部属性，引用类似iterator这种特殊的属性时要使用Symbol符号名。

@@iterator本身并不是一个迭代器对象，而是一个返回迭代器对象的函数。函数执行之后，返回的才是迭代器对象。

然后调用迭代器对象的next()方法会返回{value:..,done:..}的值，value是当前遍历的值，done是一个布尔值，表示是否还有可以遍历的值。

和数组不同，普通的对象没有内置的@@iterator，所以无法自动完成for...of遍历，主要是为了避免影响未来的对象类型。

可以为任何想遍历的对象定义@@iterator。

let myObj = {
    a: 2,
    b: 3
}
Object.defineProperty(myObj, Symbol.iterator, {
    //这种属性不需要被枚举
    enumerable: false,
    writable: false,
    configurable: true,
    //设置该迭代器的值是一个函数
    value: function () {
        var o = this;
        var idx = 0;
        //返回所有可枚举的自身属性的数组
        var ks = Object.keys(o);
        //迭代器函数执行之后返回一个对象
        return {
            //对象里面包含一个next函数，函数返回一个对象
            //这里构成了闭包
            next: function () {
                return {
                    value: o[ks[idx++]],
                    done: (idx > ks.length)
                };
            }
        };
    }
});

//手动遍历对象
let it = myObj[Symbol.iterator]();
console.log(it.next());//{value: 2, done: false}
console.log(it.next());//{value: 3, done: false}
console.log(it.next());//{value: undefined, done: true}

//用for...of遍历对象
for(let val of myObj){
    console.log(val);
}

定义一个“无限”迭代器，它永远不会“结束”并且总会返回一个新值（随机数、递增数、唯一标识符等等）。

// 无限迭代器
let randoms = {
    [Symbol.iterator]:function(){
        return {
            next:function(){
                return {value:Math.random()};
            }
        };
    }
}

let pool = [];

for(let val of randoms){
    pool.push(val);
    //防止无限运行
    if(pool.length === 100) break;
}
console.log(pool)

//简写形式
let nums = [];
for(;;){
    nums.push(Math.random());
    if(nums.length == 100){
        break;
    }
}
console.log(nums);

5、[[Get]]和[[Put]]

5.1 [[Get]]

属性访问在实现时有一个微妙却非常重要的细节：

var myObj = {
    a:2
}
console.log(myObj.a);

这是一次属性的访问，但是并不仅仅是在myObj中查找名字为a的属性。

myObj.a在myObj上实际上是实现了[[Get]]操作。对象默认的内置[[Get]]操作首先在对象中查找是否有相同名称的属性，如果找到就会返回这个属性的值。

如果没有找到名称相同的属性，按照[[Get]]算法的定义会执行另外一种非常重要的行为。就是遍历可能存在的[[Prototype]]原型链。

如果无论如何都没有找到名称相同的属性，那[[Get]]操作会返回值undefined。

这种方法和访问变量不一样。如果引用了一个当前词法作用域中不存在的变量，并不会像对象属性一样返回undefined，而是会抛出一个ReferenceError异常。

var myObj = {
    a:undefined
}


console.log(myObj.a); //undefined
console.log(myObj.b); //undefined

console.log('a' in myObj); // true
console.log('b' in myObj); //false

console.log(myObj.hasOwnProperty('a')); // true
console.log(myObj.hasOwnProperty('b')); //false

in操作符会检查属性是否在对象及其[[Prototype]]原型链上。hasOwnProperty()只会检查属性是否在myObj对象上，不会检查[[Prototype]]原型链。

5.2 [[Put]]

既然有获取属性值的[[Get]]操作，就有对应的[[Put]]操作。

给对象的属性赋值会触发[[Put]]操作，实际的行为取决于许多因素，包括对象中是否已经存在这个属性。

如果已经存在这个属性，[[Put]]算法大致会检查下面这些内容：

1、属性是否是访问描述符？如果是并且存在setter就调用setter。

2、属性的数据描述符中writable是否为false？如果是，在非严格模式下写入失败，严格模式下抛出异常。

3、如果都不是，将该值设置为属性的值。

如果对象中不存在这个属性，[[Put]]操作会更加复杂。

6、Getter和Setter

对象默认的[[Get]]和[[Put]]操作分别可以控制对象的属性值的获取和设置。

在ES5中可以适用getter和setter改写默认操作。getter是一个隐藏函数，会在获取属性值时调用。setter也是一个隐藏函数，会在设置属性值时调用。

当为一个属性定义getter、setter时，这个属性会被定义为"访问描述符"。对于访问描述符来说，JavaScript会忽略它们的value和writable特性，取而代之的是关心set和get（还有configurable和enumerable特性）。

var myObj = {
    //给属性a定义一个getter
    get a(){
        return 2;
    }
}
Object.defineProperty(myObj,'b',{
    //给b定义一个getter
    get:function(){
        return this.a * 2;
    },
    //属性b可以枚举
    enumerable:true
})

console.log(myObj.a); // 2
console.log(myObj.b); // 4

不管是对象文字语法中的get a(){}，还是defineProperty()中的显式定义，二者都会在对象中创建一个不包含值的属性。对于这个属性的访问会自动调用一个隐藏函数，它的返回值会被当作属性访问的返回值。

var myObj = {
     //默认的[[Get]]操作会被getter覆盖
     a:22,
     //给属性a定义一个getter
     get a(){
         return 2;
     },

 }
 Object.defineProperty(myObj,'b',{
     //给b定义一个getter
     get:function(){
         return this.a * 2;
     },

     //属性b可以枚举
     enumerable:true
 })

console.log(myObj.a); // 2
//只定义了getter，对属性a进行设置时set操作会忽略赋值操作
myObj.a = 3;
console.log(myObj.a); // 2
console.log(myObj.b); // 4

为了让属性更合理，还应当定义setter，setter会覆盖单个属性默认的[[Put]]赋值操作。

通常来说getter和setter是成对出现的。

var myObj = {
    get a() {
        //this._a,不能是this.a，否则会接着调用get，然后陷入死循环报错，超过堆栈大小范围。
        return this._a;
    },
    set a(val) {
        this._a = val * 2;
    }
};
myObj.a = 2;
console.log(myObj.a);

7、原型链

7.1[[Prototype]]

JavaScript中的对象有一个特殊的[[Prototype]]内置属性，其实就是对于其他对象的引用。

几乎所有的对象在创建时[[Prototype]]属性都会被赋予一个非空的值，除了Object.create(null)。

我们在访问对象的属性时:

let myObject = {
    a:2
}
myObject.a;//2

当试图访问对象的属性时会触发[[Get]]操作，对于默认的[[Get]]操作来说，第一步就是检查对象本身是否有这个属性，如果有的话就使用它。

如果a不在myObject中，就需要使用[[Prototype]]原型链了。

let anotherObject = {
    a:2
};
//创建一个关联到anotherObject的对象
let myObject = Object.create(anotherObject);
console.log(myObject.a); // 2

Object.create()会创建一个对象并把这个对象的[[Prototype]]关联到指定的对象。是ES5新增的函数。

相当于如下代码：

//polyfill
// 如果这个函数不存在
if(!Object.create){
    // 创建一个函数
    Object.create = function(o){
        // 创建一个构造函数
        function F(){}
        // 把构造函数的prototype原型对象指向传递进来的o对象
        F.prototype = o;
        // 返回构造函数的一个实例
        return new F();
    }
}

如果anotherObject也找不到a，并且[[Prototype]]原型链不为空null的话，就会继续查找下去。如果找完了整条原型链都没有，则会返回undefined.

for...in遍历对象，任何可以通过原型链访问到的可枚举的属性都会被遍历。使用in操作符来检查属性是否在对象中存在时，同样会检查对象的整条原型链。

let supperObject = {
    a: 2
};
//supperObject是anotherObject的原型
let anotherObject = Object.create(supperObject, {
    b: {
        value: 3,
        enumerable: false,
        writable: false,
        configurable: true
    }
});
//anotherObject是myObject的原型对象
let myObject = Object.create(anotherObject);
myObject.c = 4;

for (let attr in myObject) {
    console.log(attr); // c a 
}

console.log('b' in myObject); // true

7.2 Object.prototype

所有对象的[[Prototype]]链最终都会指向内置的Object.prototype。由于所有的对象都源于这个Object.prototype对象，所以它包含JavaScript中许多通用的功能。

比如valueOf()、toString()、hasOwnProperty()等都是任何对象实例可以访问的方法。

原型对象中的方法[[Prototype]]: Object 是所有实例可以访问的，constructor属性指向的构造函数下面的方法，比如constructor: ƒ Object() 构造函数下面的方法只有Object对象本身才能访问，实例不能访问。

7.3 属性设置和屏蔽

给一个对象设置属性并不仅仅是添加一个新属性或者修改已有的属性值。

myObject.b = 4;

如果myObject对象中包含名为b的普通数据访问属性，这条赋值语句只会修改已有的属性值。

如果b不是直接存在于myObject中，[[Prototype]]链就会被遍历，类似[[Get]]操作，如果原型链上找不到b，则把b直接添加到myObject上。

如果b存在于原型链上层，赋值语句的行为就会有些不同。

如果属性名b即出现在myObject中，也出现在myObject的[[Prototype]]链上层，就会发生屏蔽。

myObject中出现的b属性会屏蔽原型链上层的所有b属性，因为myObject.b总是会选择原型链中最底层的b属性。

如果在[[Prototype]]链上层存在名为b的普通数据访问属性，并且没有被标记为只读（writable:false）,那就会直接在myObject上添加一个名为b的新属性，它是屏蔽属性。

let supperObject = {
    a: 2
};
let anotherObject = Object.create(supperObject, {
    b: {
        value: 3,
        enumerable: true,
        writable: true,
        configurable: true
    }
});

let myObject = Object.create(anotherObject);
myObject.b = 4;

console.log(myObject.b); // 4

如果在[[Prototype]]链上层存在名为b的普通数据访问属性，并且被标记为只读（writable:false），那么无法修改已有属性或者在myObject上创建屏蔽属性。这条赋值语句会被忽略，不会发生屏蔽。

let supperObject = {
    a: 2
};
let anotherObject = Object.create(supperObject, {
    b: {
        value: 3,
        enumerable: true,
        writable: false,
        configurable: true
    }
});

let myObject = Object.create(anotherObject);
myObject.b = 4;

console.log(myObject.b); // 3

如果在[[Prototype]]链上层存在b,并且它是一个setter，那就一定会调用这个setter，b不会被添加到myObject上。

let supperObject = {
    a: 2
};
let anotherObject = Object.create(supperObject, {
    b: {
        value: 3,
        enumerable: false,
        writable: false,
        configurable: true,
    }
});
Object.defineProperty(anotherObject, 'b', {
    get: function () {
       //_b避免直接使用b导致死循环 
        return this._b;
    },
    set: function (val) {
        this._b = val * 3;
    }
})

let myObject = Object.create(anotherObject);
myObject.b = 4; 
console.log(myObject.b); // 12

上面的限制只存在于myObject.b = 4这种赋值语句中，使用Object.defineProperty()则不受限制。

let supperObject = {
    a: 2
};
let anotherObject = Object.create(supperObject, {
    b: {
        value: 3,
        enumerable: false,
        writable: false,
        configurable: true,
    }
});
Object.defineProperty(anotherObject, 'b', {
    get: function () {
        return this._b;
    },
    set: function (val) {
        this._b = val * 3;
    }
})

let myObject = Object.create(anotherObject);
myObject.b = 4;

console.log(myObject.b); // 12
//这种方式则会产生屏蔽，不受writable:false和setter的影响。
Object.defineProperty(myObject, 'b', {
    value: 5,
    writable: true,
    enumerable: true,
    configurable: true
})
console.log(myObject.b) // 5

继续阅读《对象属性的访问、遍历、getter和setter等高级特性！》的全文内容...

分类: JavaScript教程 | Tags: 对象，writable，enumerable，configurable，getter，setter， | 添加评论(0)

还没有评论，您来说两句？

用原型重写数组基础方法(上) (2023-07-13)
JavaScript基础4:Strings 及String Methods (2019-07-11)
面向对象(构造函数、原型、实例、原型链的关系) (2021-12-03)
DOM基础1：DOM对象初了解 (2019-08-19)
JavaScript(ES6)的常用特性！(上) (2023-07-18)

用原型重写数组迭代方法(下)

Sat, 15 Jul 2023 16:12:59 +0800

继续把数组后面迭代的方法用原型写出来……

1、forEach

        // forEach(回调函数)
        // 功能:就是遍历数组的每一项,并且每一项都要执行一次回调函数的功能.
        // 不返回值,所以返回函数默认的undefined.
        // 遍历的是数组的快照，如果中途修改或者删除了数组，不会改变遍历的顺序，所以不要修改数组
        Array.prototype.myForEach = function (callback) {
            const arr = this;
            const arg2 = arguments[1] || window;

            if (typeof callback !== 'function') {
                throw new Error('第一个参数必须是函数');
            }
            if (arr.length == 0) return;
            for (let i = 0; i < arr.length; i++) {
                callback.call(arg2, arr[i], i, arr);
            }
        }

2、map

        // map(function(item,index){})
        // 功能:遍历数组的每一项,每一项都要执行回调函数.
        // 返回值:返回一个新数组,数组的长度和原数组一样.
        Array.prototype.myMap = function (callback, scope) {
            const arr = this;
            if (typeof callback !== 'function') {
                throw new Error('参数1必须是一个函数');
            }
            let result = [];
            if (arr.length == 0) return result;
            scope = scope || window;
            for (let i = 0; i < arr.length; i++) {
                result.push(callback.call(scope, arr[i], i, arr));
            }
            return result;
        }

3、filter

        // filter(function(item,index){})
        // 功能:对数组的每一项进行筛选,每一项都要执行回调函数,通过函数筛选成功的值,返回到新数组中.
        // 返回一个新数组,数组的长度可能比原数组要小.
        Array.prototype.myFilter = function (callback, scope) {
            const arr = this;
            if (typeof callback !== 'function') {
                throw new Error('参数1必须是一个函数');
            }
            let len = arr.length;
            let result = [];
            if (len == 0) return result;
            scope = scope || window;
            for (let i = 0; i < len; i++) {
                if (callback.call(scope, arr[i], i, arr)) {
                    result.push(arr[i]);
                }
            }
            return result;
        }

4、every

        // every(function(item,index){})
        // 功能:每一项都要执行回调函数,通过了函数的条件,每一项都为true,才返回 true,如果有一项为假,则返回false
        // 返回值:布尔值
        Array.prototype.myEvery = function (callback, scope) {
            const arr = this;
            if (typeof callback !== 'function') {
                throw new Error('参数1必须是一个函数');
            }
            let len = arr.length;
            if (len == 0) return true;
            scope = scope || window;
            for (let i = 0; i < len; i++) {
                // 如果有一个不满足，返回false
                if (!callback.call(scope, arr[i], i, arr)) {
                    return false;
                }
            }
            return true;
        }

5、some

        // some(function(item,index){})
        // 功能:数组的某一项通过了函数的条件判断,则返回true,如果都没有通过,才返回false
        // 返回值:布尔值
        Array.prototype.mySome = function (callback, scope) {
            const arr = this;
            if (typeof callback !== 'function') {
                throw new Error('参数1必须是一个函数');
            }
            let len = arr.length;
            if (len == 0) return false;
            scope = scope || window;
            for (let i = 0; i < len; i++) {
                // 如果有一个满足，返回true
                if (callback.call(scope, arr[i], i, arr)) {
                    return true;
                }
            }
            return false;
        }

6、reduce

         // reduce(function(sum,i){},0)
        // 功能:累计
        Array.prototype.myReduce = function (callback, init) {
            const arr = this;
            if (typeof callback !== 'function') {
                throw new Error('参数1必须是一个函数');
            }
            let len = arr.length;
            // 如果长度为0，又没有设置初始值，报错
            if (len == 0 && init === undefined) {
                throw new Error('数组为空时必须设置初始值');
            }
            // 如果长度为0，返回初始值
            if (len == 0) return init;
            // 总的值默认为初始值，没有初始值，默认为0
            let total = init || 0;
            // 没有设置初始值的时候，total默认为第一个数组的值，选项从第二个开始遍历。
            if (init === undefined) {
                total = arr[0];
                for (let i = 1; i < len; i++) {
                    total = callback(total, arr[i], i, arr)
                }
            } else {
                // 设置了初始值，则从第一个项开始遍历
                for (let i = 0; i < len; i++) {
                    total = callback(total, arr[i], i, arr)
                }
            }
            return total;
        }

还有includes、find、findIndex等等新增的方法就不写了，差别不大，好吧，其实是我想偷懒了，累觉不爱……

继续阅读《用原型重写数组迭代方法(下)》的全文内容...

分类: JavaScript教程 | Tags: 数组，原型，迭代，方法， | 添加评论(0)

还没有评论，您来说两句？

用原型重写数组基础方法(上) (2023-07-13)
面向对象(构造函数、原型、实例、原型链的关系) (2021-12-03)

用原型重写数组基础方法(上)

Thu, 13 Jul 2023 15:46:32 +0800

通过用原型的方式重写数组的方法，加深对数组和原型的掌握。

先从最简单的开始：

1、push

        //  push(val1,val2,...)
        // 1、数组的方法，只能数组对象调用
        // 2、功能是在数组的尾部添加数据
        // 3、可以添加多个数据，逗号隔开
        // 4、返回的是数组的length值，是数字类型
        // 5、改变了原始数组
        Array.prototype.myPush = function () {
            const arr = this;
            // 保存长度，减少对数组长度的反复查找，节约性能
            let len = arr.length;
            for (let i = 0; i < arguments.length; i++) {
                arr[len++] = arguments[i];
            }
            return len;
        }

2、pop

        // pop()
        // 1、功能是：删除数组尾部的一个值
        // 2、返回被删除的数据
        // 3、改变的是原数组
        Array.prototype.myPop = function () {
            const arr = this;
            let len = arr.length;
            // 必须要判断数组的长度，如果为0，直接返回undefined
            if (len == 0) return;
            let lastItem = arr[len - 1];
            // 数组的长度少一个1，就会直接删除最后一个值。
            arr.length--;
            return lastItem;
        }

3、unshift

        // unshift(val,val,...) 
        // shift()
        // 在数组的头部添加数据和删除数据,是先后先出的模式。
        Array.prototype.myUnshift = function () {
            const arr = this;
            let len = arr.length;
            let argL = arguments.length;
            // 加入参数长度为0，返回数组的长度，不用操作后面
            if (argL == 0) return len;
            // 先把原始数组的值往右移动参数的个数
            for (let i = 0; i < len; i++) {
                arr[argL + i] = arr[i];
            }
            // 再把参数的值一一对应到数组中
            for (let i = 0; i < argL; i++) {
                arr[i] = arguments[i];
                len++;
            }
            return len;
        }

4、shift

        // shift
        Array.prototype.myShift = function () {
            const arr = this;
            let len = arr.length;
            //如果数组长度为0，则不执行，返回undefined。
            if (len == 0) return;
            //  取出第一个值
            let firstItem = arr[0];
            //  遍历后面所有值，往前移动一个位置。
            for (let i = 1; i < len; i++) {
                arr[i - 1] = arr[i];
            }
            //  数组长度减1
            arr.length--;
            //  返回第一个值
            return firstItem;
        }

5、join

        // join(分隔符)
        // 功能是：把数组的值转成字符串，用分隔符拼接。
        // 参数是可以缺省，默认是逗号隔开。
        // 如果是空字符串，直接把数组拼接成字符串
        // 返回的是字符串
        Array.prototype.myJoin = function (sep) {
            const arr = this;
            if (sep || sep === '') {
                sep = sep;
            } else {
                sep = ',';
            }
            let len = arr.length;
            let str = '';
            if (len == 0) return str;
            for (let i = 0; i < len; i++) {
                if (i < len - 1) {
                    str += arr[i] + sep;
                } else {
                    str += arr[i];
                }
            }
            return str;
        }

6、concat

        // concat(val,val,...)
        // 功能是：把多个值合并在新数组中返回
        // 参数：任意数据类型的值
        // 返回值：一个新数组
        // 不改变原数组，返回新数组,但是是浅拷贝
        // 能够拆开第一层数组。
        Array.prototype.myConcat = function () {
            const arr = this;
            let len = arr.length;
            let argsL = arguments.length;
            let newArr = [];
            // 先把原数组遍历出来，把值赋值给新数组
            for (let i = 0; i < len; i++) {
                newArr[i] = arr[i];
            }
            // 如果参数长度为0，返回新数组。
            if (argsL == 0) return newArr;

            // 遍历参数
            for (let i = 0; i < argsL; i++) {
                // 如果参数中有数组，则解开第一层数组的值
                if (arguments[i] instanceof Array) {
                    for (let j = 0; j < arguments[i].length; j++) {
                        newArr[len++] = arguments[i][j];
                    }
                } else {
                    newArr[len++] = arguments[i];
                }
            }
            return newArr;
        }

7、slice

        // slice(start,end)
        // 功能：截取数组的一段值
        // 参数：start表示开始的索引值，end表示结束的索引值，不包括结束的索引值。[start,end)，可以为负值。
        // 返回值：返回一个截取出来的新数组
        // 参数缺省，表示把所有的值都截取出来，返回到一个新数组，可以用来对数组进行浅拷贝。
        // 没有修改原数组
        // slice
        Array.prototype.mySlice = function (start, end) {
            const arr = this;
            let len = arr.length;
            let argsL = arguments.length;
            let newArr = [];
            // 如果数值长度为0，返回新的空数组
            if (len == 0) return newArr;
            // 如果第一个参数缺省，默认值为0
            start = arguments[0] || 0;
            // 如果第二个参数缺省，默认值为数组的长度
            end = arguments[1] || len;

            // 如果第一个参数小于0
            if (arguments[0] < 0) {
                start = len + arguments[0];
            }
            // 如果第二个参数小于0
            if (arguments[1] < 0) {
                end = len + arguments[1];
            }
            // 如果第一个参数大于等于第二个参数，返回新的空数组
            if (start >= end) return newArr;
            // 遍历start到end之间的值
            for (let i = start; i < end; i++) {
                newArr.push(arr[i]);
            }
            return newArr;
        }

8、splice

        // splice(index,howmany,val,val,....)
        // 功能:对数组任意位置进行增加,删除,修改值
        // 修改原数组，返回被删除的值构成的新数组，如果没有删除值，返回空数组。
        // 可以添加或者替换数组的一部分
        Array.prototype.mySplice = function () {
            const arr = this;
            let len = arr.length;
            let argsL = arguments.length;
            let newArr = [];
            // 如果没有参数，返回空数组
            if (argsL == 0) return newArr;
            // 第一个参数作为起始位置
            let start = arguments[0];
            // 如果第一个参数小于0
            if (start < 0) {
                start = start + len;
            }
            // 如果第一个参数不是数字，或者是NaN，默认0
            if (typeof start !== 'number' || start !== start || start < 0) {
                start = 0;
            }
            // 如果第一个参数大于数组的最大下标值
            if (start > len - 1) {
                start = len;
            }
            // 第二个参数作为删除的个数。
            // let howmany = (arguments[1] !== undefined) ? arguments[1] : len - start;
            let howmany = arguments[1];
            // 如果没有传参第二个参数，默认为删除起始位置后面的所有值。如果为0，不删除。
            // 这里不要用短路||运算符，否则参数为0的时候，也会返回后面len - start的值。
            if (arguments[1] === undefined) {
                howmany = len - start;
            }

            // 如果第二个参数不是数字或者是NaN，默认为0
            if (typeof howmany !== 'number' || howmany !== howmany) {
                howmany = 0;
            }
            // 如果被删除的个数大于了可以删除的个数，则只能截取到末尾。
            if (howmany > len - start) {
                howmany = len - start;
            }
            // 把要删除的值添加到新数组中
            for (let i = start; i < start + howmany; i++) {
                newArr.push(arr[i]);
            }
            // 获取第三个以后的参数
            let addArgs = Array.prototype.slice.call(arguments, 2);
            // 要添加的参数的长度
            let addArgsL = addArgs.length;

            // 如果有参数，则根据howmany来看，是添加还是替换。
            // 如果是插入或替换，只需用替换元素长度减去删除的个数即可得出向后移动的位置数，把插入替换的元素在移动出空缺的位置上对号入座；

            if (addArgsL > 0) {
                // 添加的个数和删除的个数的差值
                let num = addArgsL - howmany;
                // 如果添加的个数大于删除的个数，则是从后面扩展数组。
                if (num > 0) {
                    // 必须是从后面往前面遍历，否则前面的数会把后面的数覆盖
                    for (let i = len - 1; i >= start; i--) {
                        arr[i + num] = arr[i];
                    }
                } else {
                    // 如果添加的个数少于要删除的个数，则从起始位置加上删除个数的位置开始往前移动
                    for (let i = start + howmany; i < len; i++) {
                        arr[i + num] = arr[i];
                    }
                }

                // 改变数组的长度，如果添加的参数少于删除的个数，数组要把后面多余的数删除。
                // 数组原始的长度加上添加和删除的差值
                arr.length = len + num;
                console.log(addArgsL, howmany, arr.length, start);
                // 再把要添加的数对应到相应的位置上。
                for (let j = 0; j < addArgsL; j++) {
                    arr[start++] = addArgs[j]
                }
            } else {
                // 没有要添加的参数，值直接删除。
                for (let i = start; i < len; i++) {
                    arr[i] = arr[i + howmany];
                }
                arr.length = arr.length - howmany;
            }
            return newArr;
        }

9、reverse

        // reverse()
        // 功能:翻转数组的值
        // 没有参数
        // 返回原数组
        Array.prototype.myReverse = function () {
            const arr = this;
            let len = arr.length;
            if (len == 0) return arr;
            let centerpos = Math.floor(len / 2);
            let temp = '';
            for (let i = 0; i < centerpos; i++) {
                temp = arr[i];
                arr[i] = arr[len - 1 - i];
                arr[len - 1 - i] = temp;
            }
            return arr;
        }

10、sort

        // sort
        // v8的sort源代码使用的是数组小于10，插入排序，大于10，快速排序，大于1000，插入和快排混合。
        // https://zhuanlan.zhihu.com/p/33626637
        // https://zhuanlan.zhihu.com/p/24050357
        // 这里使用的是冒泡排序
        Array.prototype.mySort = function () {
            const arr = this;
            // 如果没有传参数
            // 默认字符串排序
            if (!arguments[0]) {
                for (let i = 0; i < arr.length - 1; i++) {
                    for (let j = 0; j < arr.length - 1 - i; j++) {
                        // 如果是默认排序，则转成字符串，升序排列
                        if (String(arr[j]) > String(arr[j + 1])) {
                            let temp = arr[j + 1];
                            arr[j + 1] = arr[j];
                            arr[j] = temp;
                        }
                    }
                }
                return arr;
            }
            else {
                let fn = arguments[0];
                for (let i = 0; i < arr.length - 1; i++) {
                    for (let j = 0; j < arr.length - 1 - i; j++) {
                        // 调用比较函数，计算相邻两个数的差值
                        let result = fn(arr[j], arr[j + 1]);
                        // 如果差值大于0，则交换两个数的位置
                        if (result > 0) {
                            let temp = arr[j + 1];
                            arr[j + 1] = arr[j];
                            arr[j] = temp;
                        }
                    }
                }
                return arr;
            }
        }

11、indexOf

        // indexOf(item,start)
        // 功能:查找数组里面是否有item这个项.可以指定从哪个索引位置开始查找,start缺省,表示0
        // 返回值:如果找到了,返回这个item项的索引值,没找到,返回-1
        // 这个方法不能判断数组里面是否有NaN,因为NaN === NaN,返回false
        Array.prototype.myIndexOf = function (ele, start) {
            const arr = this;
            if (arr.length == 0) return -1;
            start = start || 0;
            let result = -1;
            for (let i = start; i < arr.length; i++) {
                // 如果元素相等，返回第一个相等的元素的下标值
                if (ele === arr[i]) {
                    result = i;
                    break;
                }
            }
            return result;

        }

12、lastIndexOf

        // lastIndexOf(item,start)
        // 功能和indexOf()类似,只不过是从数组的右边往左边查找
        // 数组的元素的索引值是不变的,只是从右边往左边查找,返回的依然是值固定的索引值.
        Array.prototype.myLastIndexOf = function (ele, start) {
            const arr = this;
            let len = arr.length;
            if (len == 0) return -1;
            start = start || len - 1;
            let result = -1;
            for (let i = start; i >= 0; i--) {
                // 如果元素相等，返回第一个相等的元素的下标值
                if (ele === arr[i]) {
                    result = i;
                    break;
                }
            }
            return result;

        }

写了好久终于把常规的数组方法写完了，还有后面迭代的方法没有……

继续阅读《用原型重写数组基础方法(上)》的全文内容...

分类: JavaScript教程 | Tags: 数组，原型，数组方法， | 添加评论(0)

还没有评论，您来说两句？

JavaScript基础6:数组Arrays和常用属性与方法 (2019-07-23)

H5 Audio API+jQuery+ajax实现一个迷你播放器！

Wed, 12 Jul 2023 19:34:59 +0800

今天翻资料，发现一个还算完整的播放器案例，主要是练习H5提供的Audio API，结合jQuery+Ajax完成。

点击图片看效果。

功能：

1、默认不播放，点击播放按钮，播放音乐。

2、点击暂停按钮，暂停播放。

3、点击上一首，下一首播放音乐。

4、点击停止，进度条归零，停止播放音乐。

5、可以拖拉播放进度条。

6、点击列表可以切换音乐并播放。

7、播放完后自动播放下一首。

核心代码：

        // ajax获取本地json数据
        $.get('data/music.json', function (data) {
            const musicList = data.music;
            // 1、初始化界面
            let num = 0;
            // 初始化音乐和图片
            $('.playerImg').html(`
                <img src="${musicList[num].coverSrc}" alt="" width="150" height="150" id="cover">
                <audio id="audio" src="${musicList[num].videoSrc}"></audio>`);

            // 初始化音乐列表
            let str = '';
            musicList.forEach(function (item, index) {
                str += ` <li>
                <span class="mr10">${index + 1}</span>
                <span>${item.title}</span>
                <span>-</span>
                <span>${item.author}</span>
            </li>`
            })
            $('#musicList').html(str);

            // 初始化高亮            
            let len = musicList.length;
            $('#musicList > li').removeClass('active').eq(num).addClass('active');

            // 2、点击播放按钮，让音乐播放，点击切换成暂停，点击暂停
            // 获取对象或者值
            let totalWidth = $('#progrees').width();
            const oAudio = document.querySelector('#audio');
            // 默认没有播放
            let isOn = false;
            // 播放和暂停功能
            $('#play').on('click', playAndPause);
            // 停止播放
            $('.stop').on('click', stop);

            // timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
            oAudio.addEventListener('timeupdate', setProgress);
            
            // 3、点击下一首播放
            $('.next').on('click', function () {
                autoPlay();
            })
            // 3、点击上一首播放
            $('.prev').on('click', function () {
                isOn = false;
                num--;
                if (num <= -1) {
                    num = len - 1;
                }
                init(num);
                playAndPause();

            })
            // 4、点击切换歌曲
            $('#musicList > li').on('click', function () {
                num = $(this).index();
                isOn = false;
                init(num);
                playAndPause();
            })

            // 5、点击进度条改变播放的位置
            $('#progrees').on('click', function (e) {
                // 获取被点击的偏移值
                let offsetX = e.offsetX;
                // 获取被点击的位置和整个进度条长度的比例
                let radio = offsetX / totalWidth;
                let totalTime = oAudio.duration;
                // 通过比例乘以总的时间，得到当前时间，赋值给audio对象。
                oAudio.currentTime = totalTime * radio;
                // currentTime变化之后，会自动触发timeupdate事件，会去执行setProgress函数
                // setProgress函数会设置进度条的宽度样式等。
            })

            // 6、自动播放下一首
            oAudio.addEventListener('ended', function () {
                autoPlay();
            })

            function autoPlay () {
                num++;
                if (num >= len) {
                    num = 0;
                }
                isOn = false;
                init(num);
                playAndPause();
            }

            // 播放或者暂停的切换函数
            function playAndPause() {
                isOn = !isOn;
                // 播放和暂停按钮的切换
                if (isOn) {
                    oAudio.play();
                    $('#play').removeClass('play1').addClass('play2');
                    $('#play').attr('title', '暂停');
                } else {
                    oAudio.pause();
                    $('#play').removeClass('play2').addClass('play1');
                    $('#play').attr('title', '播放');
                }
            }

            // 停止播放功能
            // 点击停止按钮，停止播放，进度条归零
            function stop() {
                oAudio.pause();
                // 状态归为初始状态
                isOn = false;
                // 当前的时间归0,同时触发timeupdate事件。
                oAudio.currentTime = 0;
                $('#play').removeClass('play2').addClass('play1');
                $('#play').attr('title', '播放');
            }

            // 进度条和时间的更新,当currentTime更新的时候，会触发timeupdate这个事件
            // 这个事件触发的时候，不断更新进度条的宽度和当前的播放时间
            function setProgress() {
                let currentTime = this.currentTime;
                let totaltime = this.duration;
                let radio = currentTime / totaltime;
                let currentWidth = totalWidth * radio;
                $('#curProgrees').css('width', currentWidth);
                $('#totalTime').html(formate(totaltime));
                // console.log(currentTime , totaltime)
                $('#presentTime').html(formate(currentTime));
            }
            // 初始化界面和当前音乐的总时间
            function init(num) {
                // 隐藏时间，避免看到NaN
                $('#playTime').hide();
                // 出现音乐加载loading
                $('.loading').show();
                oAudio.src = musicList[num].videoSrc;
                $('#cover').attr('src', musicList[num].coverSrc);
                $('#musicList > li').removeClass('active').eq(num).addClass('active');
                // 当音乐加载完毕，才获取总的时间，去掉loading
                oAudio.addEventListener('loadedmetadata', function () {
                    // 隐藏loading
                    $('.loading').hide();
                    let totaltime = this.duration;
                    // 显示时间
                    $('#playTime').show();
                    $('#totalTime').html(formate(totaltime));
                })
            }
        }, "json")

        // 格式化时间
        function formate(time) {
            let min = Math.floor(time / 60);
            let sec = Math.floor(time % 60);
            min = min < 10 ? '0' + min : min;
            sec = sec < 10 ? '0' + sec : sec;
            return `${min}:${sec}`;
        }

继续阅读《H5 Audio API+jQuery+ajax实现一个迷你播放器！》的全文内容...

分类: JavaScript案例集 | Tags: audio，HTML5，jQuery，ajax，播放器， | 添加评论(0)

还没有评论，您来说两句？

Vue版本的todos本地任务清单！ (2023-07-28)
利用transform打造走动的2D时钟 (2018-05-15)
HTML5拖拽API实现本地拖拽或点击选择多张图片显示缩略图 (2023-07-05)
jQuery+Ajax实现表单的关联下拉菜单选择 (2021-12-18)
JavaScript案例5：QQ好友列表的展开和隐藏 (2018-08-28)

函数中的this对象的四种绑定规则和优先级！

Wed, 12 Jul 2023 14:28:29 +0800

函数中的this是一个刚开始接触比较头疼的概念，总感觉它变来变去，害怕一不留神它就不是原来的它了。

ES6用了箭头函数干脆把this固定住，不允许它变，但是在更复杂的场景中，我们恰恰需要this的多变性，所以，还是必须把this的绑定规则搞定。

1、this对象

this是JavaScript中一个很特别的关键字，被自动定义在所有函数的作用域中。在函数被调用的时候，this才具有指向性。this引用的是函数执行时的环境对象，也就是函数执行时的作用域对象。不是函数声明时的作用域对象。

1.1、调用位置

this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

在理解this的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。

最重要的是要分析调用栈，就是为了到达当前执行位置所调用的所有函数，我们关心的调用位置就在当前正在执行的函数的前一个调用中。

// 调用栈就是当前正在执行的函数
// 调用位置就在当前正在执行的函数的前一个调用中。
function baz(){
    //当前调用栈是：baz
    // 因此，当前调用位置是全局作用域
    console.log('baz');
    bar(); //bar的调用位置
    console.log('baz');
}
function bar(){
    // 当前调用栈是baz->bar
    // 因此，当前调用位置在baz中。
    console.log('bar');
    foo();//foo的调用位置
    console.log('bar');
}
function foo(){
    //调试命令，可以让程序停留在这里
    debugger;
    // 当前调用栈是baz->bar->foo
    // 因此，当前调用位置在bar中。
    console.log('foo');
}

baz(); //baz的调用位置

1.2、绑定规则

1.2.1、默认绑定

最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其它规则时的默认规则。

function foo(){
    console.log(this.a);
}
//声明在全局作用域中的变量就是全局对象的一个属性。
var a = 2;
// 函数被调用时应用了this的默认绑定，this指向全局对象window
foo(); // 2

1.2.2、隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。

function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo
}
obj.foo(); // 2

函数foo()被当做引用属性添加到obj中，但是无论是直接在obj中定义还是先定义再添加为引用属性，这个函数严格来说都不属于obj对象。

然而，调用位置会使用obj上下文来引用函数，因为可以说函数被调用时obj对象“拥有”或者包含”它。

当foo()被调用时，它的前面加上了对obj的引用。当函数引用有上下文对象时，隐式绑定规则会把函数调用时的this绑定到这个上下文对象。

对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。

function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo
}
var obj1 = {
    a:3,
    obj2:obj,
}
obj1.obj2.foo();//2

1.2.3、隐式丢失

一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把this绑定到全局对象或者undefined中。取决于是否是严格模式。（非严格模式绑定到全局对象，严格模式绑定到undefined中）

function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo,
}
//bar是obj.foo的一个引用，但是实际上，它引用的是函数foo本身。函数引用的上下文丢失
var bar = obj.foo; // 函数别名！
var a = '全局属性的值';
//此时bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
bar(); // 全局属性的值

一种更常见的情况发生在传入回调函数时：

function foo(){
    console.log(this.a);
}
//传入回调函数
function doFoo(fn){
    //fn其实引用的是foo
    fn(); //foo的调用位置
}
var obj = {
    a:2,
    foo:foo
}
var a = '全局属性的值';
//传递参数其实也是一种隐式赋值，传入函数时也会被隐式赋值。
// fn = obj.foo 函数别名
doFoo(obj.foo);//全局属性的值

把函数传入语言内置的函数，情况也是一样的。

function foo(){
    console.log(this.a);
}
var obj = {
    a : 2,
    foo : foo
}
var a = "全局属性的值";
setTimeout(obj.foo,1000); //全局属性的值

//和下面的代码原理相似：
//fn = obj.foo 函数别名
function setTimeout(fn,delay){
    //等待delay毫秒
    fn(); //调用位置

}

回调函数丢失this绑定是非常常见的。那么如何固定this呢？

1.2.4、显式绑定

隐式绑定时，我们必须在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把this间接绑定到这个对象上。

如果不想在对象内部包含函数引用，只想在某个对象上强制调用函数，该怎么做呢？

函数作为对象，也拥有自己的方法，call()和apply()方法，JavaScript提供的函数和自己创建的所有函数都可以使用call()和apply()方法。

方法的第一个参数是一个对象，是给this准备的，在调用函数时将其绑定到this。因为可以直接指定this的绑定对象，这种方法称之为显式绑定。

function foo(){
    console.log(this.a);
}
var obj = {
    a:2
}

foo.call(obj); // 2

通过foo.call()，可以在调用foo()函数时强制把foo里面的this绑定到obj上。

如果传入了一个原始值（字符串类型、布尔值类型、数字类型）来当作this的绑定对象，这个原始值会被转换成它的对象形式（new String()、new Boolean()、new Number()），这通常被称为“装箱”。

1、硬绑定

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2
}
//显式的强制绑定叫做硬绑定
var bar = function () {
    foo.call(obj);
}
bar(); // 2 
setTimeout(bar, 100); // 2
var a = '全局';
//硬绑定的bar不可能再修改它的this
bar.call(window); // 2

硬绑定的典型应用场景就是创建一个包裹函数，负责接收参数并返回值：

function foo(something){
    console.log(this.a,something);
    return this.a + something;
}
var obj = {
    a:2
}
var bar = function(){
    //把bar的arguments参数传递给foo，apply支持传递arguments参数。
    return foo.apply(obj,arguments);
}
var b = bar(3); // 2 3
console.log(b); // 5

另一种方法是创建一个可以重复使用的辅助函数：

function foo(something){
    console.log(this.a,something);
    return this.a + something;
}

//简单的辅助绑定函数
function bind(fn,obj){
    //返回一个新函数，形成闭包
    return function(){
        return fn.apply(obj,arguments);
    }
}
var obj = {
    a:2
}
var bar = bind(foo,obj);
var b = bar(3); // 2 3 
console.log(b); // 5

由于硬绑定是一种非常常见的模式，所以ES5提供了内置的方法Function.prototype.bind，它的用法如下：

function foo(something){
    console.log(this.a,something);
    return this.a + something;
}

var obj = {
    a:2
}
//利用JavaScript提供的bind函数直接硬绑定
var bar = foo.bind(obj);
var b = bar(3); // 2 3
console.log(b);//5
console.log(bar === foo); // false

bind()会返回一个新函数，它会把你指定的参数设置为this的上下文并调用原始函数。

2、API调用的“上下文”

第三方库的许多函数，以及JavaScript语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文（context）”，其作用和bind()一样，确保你的回调函数使用指定的this。

function foo(el){
    console.log(el,this.id);
}
var obj = {
    id:'myid'
}
var id = '全局';
//调用foo时把this绑定到obj
[1,2,3].forEach(foo,obj);

这些函数实际上就是通过call()等实现了显示绑定，可以少写一些代码实现this的绑定。

1.2.5、new绑定

这是最后一条this的绑定规则。

使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：

1、创建一个全新的对象。

2、这个新对象会被执行[[prototype]]连接。

3、这个新对象会绑定到函数调用的this。

4、如果函数没有返回其它对象，那么new表达式中的函数调用会自动返回这个新对象。

function Foo(a){
    this.a = a ;
}
//使用new调用foo函数，会构造出一个新对象，并把这个新对象绑定到foo函数调用中的this上。
var bar = new Foo(2);
console.log(bar.a); // 2

在JavaScript中，构造函数只是一些使用new操作符时被调用的函数，它们并不是一种特殊的函数类型，它们只是被new操作符调用的普通函数而已。

所以，所有函数都可以用new来调用，这种函数调用被称为构造函数调用，实际上并不存在所谓的“构造函数”，只有对于函数的“构造调用”。

1.3、优先级

默认绑定的优先级是四条规则中最低的。

显示绑定的优先级高于隐式绑定。

function foo(){
    console.log(this.a);
}
var obj1 = {
    a:2,
    foo:foo     
}
var obj2 = {
    a:3,
    foo:foo 
}
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2

new绑定比隐式绑定优先级高

function foo(something){
    this.a = something;
}

var obj1 = {
    foo:foo
}
var obj2 = {};
obj1.foo(2);
console.log(obj1.a); // 2
//显示绑定比隐式绑定优先级高
obj1.foo.call(obj2,3);
console.log(obj2.a);//3
//new绑定比隐式绑定的优先级高
var bar = new obj1.foo(4);
console.log(bar.a); // 4

console.log(obj1.a);//2

new绑定的优先级高于显示绑定

function foo(something){
    this.a = something;
}

var obj1= {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

现在可以根据优先级来判断函数在某个调用位置应用的是哪条规则。

可以按照下面的顺序进行判断：

1、函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。

var bar = new Foo()

2、函数是否通过call、apply（显式绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象。

var bar = foo.call(obj2)

3、函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象。

var bar = obj.foo()

4、如果都不是的话，使用默认绑定。如果是在严格模式下，就绑定到undefined，否则绑定到全局对象。

var bar = foo()

1.4、绑定例外

如果把null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定。

function foo(){
    console.log(this.a);
}
var a = 2;
foo.call(null); // 2

什么情况下会传入null呢？

一种常用的做法是用apply()来展开一个数组，并当做参数传入一个函数。

function foo(a,b){
    console.log(a + b);
}
// 把数组展开成参数
foo.apply(null,[2,3]); // 5
//使用bind()进行柯里化
var bar = foo.bind(null,2);
bar(3); // 5

这两种方法都需要传入一个参数当做this的绑定对象，如果函数不关心this的话，仍然需要传入一个占位值，null非常方便。

let arr = [12,45,14,38];
let max = Math.max.apply(null,arr);
console.log(max); // 45

然而，总是使用null来忽略this绑定可能产生一些副作用，如果某个函数确实使用了this（比如第三方库中的一个函数），那默认绑定会把this绑定到全局对象window上，这可能会导致不可预计的后果（比如修改全局对象）。所以，使用null会导致难以分析和追踪的bug。

更安全的this

一种更安全的方法是传入一个特殊的对象，把this绑定到这个对象不会对程序产生任何副作用。

通过创建一个空对象，就不会对全局对象产生任何影响。

// 创建一个空对象，这个空对象比{}更空，因为并不会创建Object.prototype对象。
var φ = Object.create(null);
// console.log(φ,{})
function foo(a,b){
    console.log(a + b);
}
// 把数组展开成参数
foo.apply(φ,[2,3]); // 5
//使用bind()进行柯里化
var bar = foo.bind(φ,2);
bar(3); // 5

2、this词法

在ES6中有一种无法使用上面四种规则的特殊函数类型：箭头函数。

箭头函数并不是使用function关键字定义的，而是使用被称为“胖箭头”的操作符=>定义的。箭头函数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域来决定this。

function foo(){
    //返回一个箭头函数
    return a => {
        //this继承自foo()
        console.log(this.a);
    };
    /* return function(a){
           console.log(this.a);
       }; */
}
let obj1 = {
    a:2
};
let obj2 = {
    a:3
};

let bar = foo.call(obj1);
bar.call(obj2);// 2

foo()内部创建的箭头函数会捕获调用时foo()的 this，由于foo()的this绑定到了obj1，bar(引用箭头函数)的this也会绑定到obj1，箭头函数的绑定无法被修改。（new也不行！）

箭头函数最常用于回调函数中，例如事件处理器或者定时器：

function foo(){
    setTimeout(()=>{
        //这里的this在词法上继承自foo()
        console.log(this.a);
    },1000)
}

let obj1 = {
    a:2
};
foo.call(obj1); // 2

箭头函数可以像bind()一样确保函数的this被绑定到指定对象上，此外，其重要性还体现在它用更常见的词法作用域取代了传统的this机制。

在ES6之前，有一种几乎和箭头函数完全一样的模式：

function foo(){
    //把this对象保存在变量中
    var _this = this;
    setTimeout(function(){
        //通过_this变量来使用保存好的this对象
        console.log(_this.a);
    },1000)
}

let obj1 = {
    a:2
};
foo.call(obj1); // 2

3、构造函数

其实，在JavaScript中，构造函数并不是一种特殊的函数，只是受到Java等面向对象，拥有类概念的语言的影响。

构造函数首字母要大写这种规矩也是来源于对Java等语言的追随。

function Foo(){
    return this;
}
let o = new Foo();

console.dir(Foo);//prototype是函数的一个属性，可以叫做原型对象。
//函数的prototype对象里面有一个constructor属性，又指向函数本身。
console.log(Foo.prototype.constructor === Foo); // true
//o是一个实例，它有一个原型链[[Prototype]]属性，指向new出自己的函数的原型对象。
console.log(o);
//通过__proto__可以访问实例的原型对象。
console.log(o.__proto__);
//o实例并没有constructor属性，但是通过对原型链的往上层访问，可以访问到原型对象里面的constructor属性。
console.log(o.constructor === Foo);// true

实际上，Foo函数与其他函数没有任何区别。函数本身不是构造函数，当在普通函数调用前面加上new关键字后，就会把这个函数调用变成一个“构造函数调用”。实际上，new会劫持所有普通函数并用构造对象的形式来调用它。

function nothingSpecial(){
    console.log('我是一个普通函数');
}

let obj = new nothingSpecial();
console.log(obj); // {}

nothingSpecial()只是一个普通函数，使用new调用的时候，就会产生一个对象并赋值给obj，使用new调用一个函数无论如何都会返回一个对象。这个new的调用是一个构造函数的调用，但是nothingSpecial()却不是一个构造函数。

可以理解为在JavaScript中，对于“构造函数”最准确的解释是：所有带new的函数调用。

函数不是构造函数，但是当且仅当使用new时，函数调用会变成“构造函数调用”。

当函数作为构造函数调用的时候，函数内部的this指向new返回出来的对象。

继续阅读《函数中的this对象的四种绑定规则和优先级！》的全文内容...

分类: JavaScript教程 | Tags: 函数，this，箭头函数， | 添加评论(0)

还没有评论，您来说两句？

JavaScript基础6:数组Arrays和常用属性与方法 (2019-07-23)
DOM基础1：DOM对象初了解 (2019-08-19)
函数作为对象的属性和方法(call、apply、bind) (2023-07-10)
JavaScript基础3:运算符和表达式 (2019-07-08)
对象属性的访问、遍历、getter和setter等高级特性！ (2023-07-16)

一半设计一半前端

前端开发的模块化发展和ES6模块化标准

1、模块化发展历史

1.1 模块化的目的

1.2 前端模块化的雏形

1.2.1 第一阶段 文件划分

1.2.2 第二阶段 命名空间

1.2.3 IIFE立即执行的函数表达式

1.2.4 利用传参解决依赖问题

2、模块化的规范

2.1 CommonJS规范

2.2 AMD规范和CMD规范

2.2.1 RequireJS和SeaJS

3、 ES6 Module

3.1 ESM特性

3.1.1 在HTML中声明脚本模块

3.1.2 默认是严格模式

3.1.3 每个模块都是运行在单独的私有作用域中

3.1.4 通过CORS访问外部资源

3.1.5 模块会自动延迟加载

3.2 导入和导出

3.2.1 变量函数声明导出

3.2.2 命名导出

3.2.3 默认导出

3.2.4 按需导入

3.2.5 命名空间导入

3.2.6 默认导入

3.2.7 默认和按需同时导入

3.2.8 只运行不导入

3.2.9 动态导入

3.2.10 注意事项

最新评论:

相关文章:

Vue版本的todos本地任务清单！

相关文章:

用ES6写了一个todos，本地任务清单！

相关文章:

JavaScript(ES6)的常用特性！(下)

1、Symbol

1.1 为对象添加私有成员

1.2 内置的Symbol属性

2、Set数据结构

2.1 创建一个set数据结构的实例

2.2 实例的方法

2.2.1 添加add(value)

2.2.2 移除某个值delete(value)

2.2.3 移除所有元素 clear()

2.2.4 has(value)

2.3 实例的属性

2.4 遍历

2.4.1 forEach()

2.4.2 for ... of

2.5 应用场景

2.5.1 和数组的转换

2.5.2 和字符串相关

3、Map数据结构

3.1 对键值的操作

3.2 键名可以是任意的数据类型

3.3 map的遍历

3.4 map和数组的转换

4、Object相关

4.1 Object.assign()

4.2 Object.is()

4.3 Object.create()

5、class类

5.1 声明类

5.2 静态属性和方法

5.3 extends扩展子类

相关文章:

JavaScript(ES6)的常用特性！(上)

1、ES6介绍

2、块作用域声明

2.1 let声明

2.1.1 var变量提升，let变量暂时性死区

2.1.2 let + for

2.2 const声明

2.3 块作用域函数

3、spread/rest

4、默认参数值

5、解构

1.2.1 第一阶段文件划分

1.2.2 第二阶段命名空间