JS面向对象两大编程思想 面向过程 面向对象 面向过程编程POP         面向过程就是分析出问题的需要步骤,然后用函数一步一步的实现,使用的时候一个一个调用就可以了 面向对象编程OOP         面向对象是把事物分解成一个个对象,然后由对象之间分工与合作         面向对象具有灵活,代码可以重复使用,容易维护和开发的优点,适合大型软件开发项目; 面向对象的特点         封装性         继承性         多态性 面向过程         优点:性能比面向对…

前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>,今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能. 要实现的功能分析 点击tab栏可以切换效果 点击+号,可以添加tab项和内容项 点击X号,可以删除当前的tab项和内容项 点击tab文字或者内容项文字,可以修改里面的字体内容 抽像对象: Tab对象 (增删改查功能)实现功能效果如下图…

前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生成实例对象的传统方法是通过构造函数来创建的. function Person (name,age){ this.name = name; this.age = age; } Person.prototype.say=function(){ // 不能使用箭头函数(我差点忘记),因为 箭头函数没有pr…

ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d], b, c] = [[1,4], 2, 3]; var [...a] = [1,2] var [c = 3] = [5] //默认值 var { foo, bar } = { foo: "aaa", bar: "bbb" }; 作用. 复杂的 json & a…

菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函数和new命令 五.构造函数和new命令 六.构造函数和new命令 七.构造函数和new命令 八.构造函数和new命令 一.构造函数和new命令 1.构造函数 JavaScript语言的对象体系,不是基于"类"的,而是基于构造函数(constructor)和原型链(prototype) 为…

import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起. 这有可能导致两个问题: 一方面js代码变得很臃肿,难以维护 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug 在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种…

default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; val_2 = val_2 || 20; return console.log(val_1 + val_2); } add(); 而现在可以这么做 function add_1(val_1 = 5,val_2 = 10){ return console.log(val_1 + val_2); }…

为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口(Interface),yield则是生成器函数中表示 返回 或 继续 执行的关键字. 弄清楚这两个概念后,先看一个例子: function* fun(val) { yield 1*val; yield 2*val; yield 3*val; yield 4*val; return 5*val; }…

接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = function(){ console.log("say Hi!"); } document.getElementById("click_2").onclick = () => { let a = 1; let b = 2; console.log(a + b);…

学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也就是说,ES6就是ES2015. let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 这些是ES6最常用的几个语法,基本上学会它们,我们…