写在开头

本文将带你深入理解ES5 中的一些拓展

后续的文章都会与前端有关,欢迎各位同路途的人一起交流学习,3月份又是努力的开头,加油!

推荐阅读:来自 菜鸟 的 前端实习面经 大厂 春招实习生

ES 6专栏 -> 传送门

如果想更多了解ES6,请参考之前写过的一些文章:

ES6 一文弄懂 var let const 三剑客区别 吊打面试题

ES6 面试题:你能说出浏览器上到此支持多少个中文字吗?

ES6 面试题:你可以写出一百个 div 吗?一万个呢?

ES6 深入理解 includes

ES6 深入理解 startsWith和endsWith

ES6 深入理解 ${ } 模版

ES6 深入理解 数组中 find 方法

ES6 深入理解 …拓展运算符 合并数组及demo选项卡实例

ES6 在es6中自定义封装 jQuery

ES6 深入理解之字符串篇 保姆级 教你用js写选项卡demo

ES6 深入理解之number篇 保姆级 教你用js写选项卡demo

ES6 深入理解之方法篇 保姆级 教你用js写选项卡demo

ES5 中的 严格模式

JSON 对象

1、js对象(数组) --> json对象(数组):

 JSON.stringify(obj/arr)

2、json对象(数组) --> js对象(数组):

 JSON.parse(json)

上面这两个方法是ES5中提供的。

我们要记住,我们通常说的“json字符串”,只有两种:json对象、json数组

typeof json字符串的返回结果是string。

Object的扩展

ES5给Object扩展了一些静态方法,常用的有2个,我们接下来讲解。

方法一

 Object.create(prototype, [descriptors])

作用: 以指定对象为原型,创建新的对象。同时,第二个参数可以为为新的对象添加新的属性,并对此属性进行描述。

举例1:(没有第二个参数时)

    var obj1 = {username: 'smyhvae', age: 26};var obj2 = {address:'shenzhen'};obj2 = Object.create(obj1);console.log(obj2);

打印结果:

我们发现,obj1成为了obj2的原型。

举例2:(有第二个参数时)

第二个参数可以给新的对象添加新的属性。我们修改上面的代码,尝试给obj2添加新属性sex

    var obj1 = {username: 'smyhvae', age: 26};var obj2 = {address: 'shenzhen'};obj2 = Object.create(obj1, {sex: {//给obj2添加新的属性`sex`。注意,这一行的冒号不要漏掉value: '男',  //通过value关键字设置sex的属性值writable: false,configurable: true,enumerable: true}});console.log(obj2);

上方代码中,我们通过第5行的sex给obj2设置了一个新的属性sex,但是要通过value来设置属性值(第6行)。

设置完属性值后,这个属性值默认是不可修改的,要通过writable来设置。总而言之,这几个关键字的解释如下:

  • value:设置属性值。
  • writable:标识当前属性值是否可修改。如果不写的话,默认为false,不可修改。
  • configurable:标识当前属性是否可以被删除。默认为false,不可删除。
  • enumerable:标识当前属性是否能用 for in 枚举。 默认为false,不可。
单独设置属性
Object.defineProperty(obj2, 'sex', {value: 'cc',writable: true,configurable: true,enumerable: true,});

方法二

这个方法有点难理解。

 Object.defineProperties(object, descriptors)

作用:为指定对象定义扩展多个属性。

代码举例:

    var obj2 = {firstName : 'smyh',lastName : 'vae'};Object.defineProperties(obj2, {fullName : {get : function () {return this.firstName + '-' + this.lastName},set : function (data) {  //监听扩展属性,当扩展属性发生变化的时候自动调用,自动调用后将变化的值作为实参注入到set函数var names = data.split('-');this.firstName = names[0];this.lastName = names[1];}}});console.log(obj2.fullName);obj2.firstName = 'tim';obj2.lastName = 'duncan';console.log(obj2.fullName);obj2.fullName = 'kobe-bryant';console.log(obj2.fullName);
  • get :用来获取当前属性值的回调函数

  • set :修改当前属性值得触发的回调函数,并且实参即为修改后的值

存取器属性:setter,getter一个用来存值,一个用来取值。

Object的扩展(二)

obj对象本身就自带了两个方法。格式如下:

get 属性名(){} 用来得到当前属性值的回调函数set 属性名(){} 用来监视当前属性值变化的回调函数

举例如下:

    var obj = {firstName : 'kobe',lastName : 'bryant',get fullName(){return this.firstName + ' ' + this.lastName},set fullName(data){var names = data.split(' ');this.firstName = names[0];this.lastName = names[1];}};console.log(obj.fullName);obj.fullName = 'curry stephen';console.log(obj.fullName);

数组的扩展

下面讲的这几个方法,都是给数组的实例用的。

下面提到的数组的这五个方法,更详细的内容,可以看《03-JavaScript基础/15-数组的常见方法.md》

方法1

 Array.prototype.indexOf(value)

作用:获取 value 在数组中的第一个下标。

方法2

 Array.prototype.lastIndexOf(value)

作用:获取 value 在数组中的最后一个下标。

方法3:遍历数组

 Array.prototype.forEach(function(item, index){})

方法4

 Array.prototype.map(function(item, index){})

作用:遍历数组返回一个新的数组,返回的是加工之后的新数组。

方法5

 Array.prototype.filter(function(item, index){})

作用:遍历过滤出一个新的子数组,返回条件为true的值。

函数function的扩展:bind()

ES5中新增了bind()函数来改变this的指向。

 Function.prototype.bind(obj)

作用:将函数内的this绑定为obj, 并将函数返回。

面试题: call()、apply()和bind()的区别:

  • 都能改变this的指向

  • call()/apply()是立即调用函数

  • bind():绑定完this后,不会立即调用当前函数,而是将函数返回,因此后面还需要再加()才能调用。

PS:bind()传参的方式和call()一样。

分析

为什么ES5中要加入bind()方法来改变this的指向呢?因为bind()不会立即调用当前函数。

bind()通常使用在回调函数中,因为回调函数并不会立即调用。如果你希望在回调函数中改变this,不妨使用bind()。

总结

学如逆水行舟,不进则退

ES5 中的一些拓展相关推荐

  1. 36 ES5中新增的方法

    技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.ES5新增方法概述 ES5中给我们新增了一些方法,可以很方便的操作数组或字符串,这些方 ...

  2. ES5中新增的Array方法详细说明

    一.前言-索引 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如下: forEach (j ...

  3. JavaScript高级之ES5 中的新增方法

    3.1 ES5 新增方法概述 ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括: 数组方法 字符串方法 对象方法 3.2 数组方法 迭代(遍历)方法:forEach() ...

  4. 带你学习ES5中新增的方法

    文章目录 1. ES5中新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括以下几个方面 2. 数组方法 2.1 forEach跟jQuery的each用法类似.语法是: 2.2 map( ...

  5. ES6/02/创建对象,构造函数和原型,原型和原型链,this指向,类,ES5新增的方法,数组方法,回调函数,ES5新增的字符串方法,ES5中新增的对象方法

    创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...

  6. es5中数组方法unshift、splice、reduce使用

    1 es5和es6的区别 https://www.cnblogs.com/sunshinezjb/p/9248533.html 2 原型对象与原型链暂放 3 JSON对象的方法: parse, str ...

  7. 23~49(构造函数+继承+类的本质+ES5中的新增方法)

    1 构造函数和原型 1.1 概述 在典型的OOP的语言中(如Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没用引入类的概念. ES6,全称ECMAScript ...

  8. 7种方法实现ES5中的继承

    7种方法实现ES5中的继承 1.借用构造函数继承父类属性 步骤 实现示例 优缺点 2.利用原型对象继承父类方法 步骤 实现示例 优缺点 3.组合继承 步骤 实现示例 优缺点 4.寄生式继承 步骤 实现 ...

  9. es6遍历树结构并判断_ES6和ES5中数据结构的遍历

    看了ES6就感觉各种数据结构的遍历方法好多好混乱,就写下来总结下,看看应用场景上有什么区别 Array: ES5: (1)Array.prototype.forEach(function(item,i ...

  10. javaScript(ES5)中想方设法继承家产的方式详解

    目录 前言 一.原型链继承 原型链继承的概念 原型链继承的不足 二.借用构造函数继承 借用构造函数继承的概念 利用构造函数继承的不足 三.组合继承(原型链继承+构造函数继承) 组合继承的概念 组合继承 ...

最新文章

  1. 「分布式」艺术创作:20分钟+1080显卡,这个AI就能创造复杂作品 | 开源
  2. 第五周 1 素数和(5分)
  3. 人机接口设备攻击(HID Attack)
  4. Service Mesh 从“趋势”走向“无聊”
  5. 《UML中的六大关系》和《Eclipse中如何使用UML方便查看项目框架》
  6. Nginx + pserve + supervisord — The Pyramid Cookbook v0.2
  7. Oracle数据库物理存储结构管理遇到的问题与解决
  8. 门禁系统产品选择与施工要点
  9. Linux内存管理之内存寻址:分段机制的实现方式
  10. 使用TopShelf做windows服务安装 ---安装参数解释
  11. bzoj 3670 [NOI2014]动物园
  12. 计算机三级信息安全笔记(知识点)
  13. android p正式版一加6,一加6T出厂搭载Android P 将于11月5日发布tokyo hot n0727
  14. Jmeter(一)-使用http proxy代理录制脚本
  15. linux的火狐浏览器怎么用,火狐浏览器怎么用 火狐浏览器使用方法大全
  16. Luogu 1894 [USACO4.2]完美的牛栏The Perfect Stall
  17. 离散数学——命题逻辑
  18. 32位和64位CPU操作系统的区别
  19. Springboot实现拦截器功能
  20. 快速学习编程语言,快速高效的入门

热门文章

  1. GreenPlum 集群部署详细过程 V2.0
  2. HTML学习笔记02 特殊符号
  3. 软件安全备考--CVE标准
  4. 蓝桥杯练习系统——算法训练解答
  5. 论生涯规划 高考志愿填报指南
  6. 层次分析法(The analytic hierarchy process, 简称AHP)
  7. java计算机毕业设计水果商城源代码+数据库+系统+lw文档1
  8. 《python全栈开发》学习笔记
  9. 西南石油大学计算机系统基础考试题,西南石油大学历年复试题.pdf
  10. 昆明二级计算机考试报名时间2015,2016上半年云南昆明理工大学计算机等级考试报名通知...