es5

js实现对象的继承是开发人员迈向高级的重要基础，本文就es5和es6实现对象继承的最佳实践方式做一总结。 es5最佳继承模式“寄生组合” 关于es5多种继承方式实现的比较不太清除的，请移步“ ES5面向对象js实现继承的最优方式 ”如果对es5与es6定义对象不清楚的可以移步“ es5和es6定义对象比较 ”。 我们用es5继承的最佳实践“寄生组合方式”实现Person 和Gcc的继承关系： let Person = function(name,age){ this.name = name; this.age = age; } Person.prototype.say = function(){ console.log(`大家好我是${this.name},我今年${this.age}岁了。`) } //子类 function Gcc(name, age, sex) { Person.apply(this, [name,age]); //Gcc的属性 this.sex = sex; } Gcc.prototype = Object.create(Person.prototype, { constructor: { value: Gcc, writable: true, configurable: true } }); //Gcc的公共方法 Gcc.prototype.saySex

ES6 从6入门到10放弃(耐心) 语法本身并不重要，怎么解决问题！怎么更好的解决问题才是本质 ES6 --> ES7、8、9、10 利用新技能拓宽解决问题的思路 全新的JavaScript体系 字符串模板（直接赋值变量，支持表达式） 监听数据 自定义数据结构，遍历 ES7 --> ES10 全新体系,改变JS书写习惯 学习方法 体验乐趣 1天 进入状态 10天 养成习惯 1个月后 收获知识 3个月后 行程思维习惯 5个月后 ES6 基础语法 _作用域 Let & Const 全局作用域 var abc = 1234 (全局变量) abcd = 2345 （全局作用域）（作为window属性使用,可被删除） window.delete abcd // true 函数作用域 - 块状作用域 function test(){ var a = 3 函数作用域 if(true){ 块状作用域 } function test2(){ var b = 4 let c = 4 // let 当前{}块状作用域 return a + b } //作用域链,向上找 test2() 函数作用域 } 动态作用域 window.a = 3 function test(){ console.log(this.a) } // this 动态作用域变量 test() test.bind({a:100})()

1:安装插件 在命令行中定位到根目录 安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-preset-es2015 安装 Gulp 上 uglify 压缩插件 npm install --save-dev gulp-uglify 2.Gulp配置 在项目根目录新建 .babelrc ，内容为： { "presets": ["es2015"] } 在项目根目录新建 gulpfile.js，内容为： 　　var gulp = require('gulp'); 　　var babel = require('gulp-babel'); 　　gulp.task("toes5", function () { 　　return gulp.src("src/js/**/*.js")// ES6 源码存放的路径 　　　　 .pipe(babel()) 　　　　 .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径 }); gulp.task('auto'

ES5、ES6的四种继承 众所周知，在 ES6 之前，前端是不存在类的语法糖，所以不能像其他语言一样，使用 extends 关键字就搞定继承关系，需要一些额外的方法来实现继承。 一. 原型链继承 function Parent(){ this.name = 'mortal' } Parent.prototype.getName = function(){ console.log(this.name) } function child(){ } //主要精髓所在 Child.prototype = new Parent() Child.prototype.constructor = Child let mortalChild = new Child() mortalChild.getName() //'mortal' 原型链继承缺点： 1.每个实例对引用类型属性的修改都会被其他的实例共享。 function Parent(){ this.names = ['mortal','mortal1'] } function Child(){ } //主要精髓所在 Child.prototype = new Parent() Child.prototype.constructor = Child let mortalChild2 = new Child() mortalChild2.name

1、样式问题 如果你的样式原本好好的，安装完依赖之后发现css路径有问题或者样式不对劲的，说明重装的依赖版本不对，手动更改 package.json 里面 dependencies => element-ui 版本号再次安装，样式恢复，问题解决。 2、兼容问题 vue 项目在谷歌浏览器和火狐浏览器打开都是正常显示，但在IE浏览器和360浏览器兼容模式下打开空白屏，打开调试发现报错，报的错都是 es6 语法（“use strict”, 箭头函数），这个时候就需要安装 es6 转 es5 的插件啦。 es6 转 es5友情链接 踩坑漫漫长路，有后续再更新... 来源： CSDN 作者： 东又夏_ 链接： https://blog.csdn.net/qq_41609134/article/details/103609320

Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置 在 webpack.config.js 中的module的rules中,添加一条新的loader { test: /\.js/, //babel转化es6到es5 exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", corejs: 2 } ] ] } } } 目前就已经可以了 缺点,会他会对于window的变量造成一些污染,那么我们就可以使用第二种方式 第二种方式 安装 npm install --save-dev babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime 使用 在 webpack.config.js 中的module的rules中添加一条如下规则 { test: /\.js/, //babel转化es6到es5 exclude: /node_modules/, use: { loader: "babel

1.11、修饰器(Decorator) 修饰器(Decorator)是一个函数， 用来修改类的行为。 ES2017 引入了这项功能， 目前 Babel 转码器己经支持。 使用： 运行报错： 原因是，在ES6中，并没有支持该用法，在ES2017中才有，所以我们不能直接运行了，需要进行编码后再运行。转码的意思是：将ES6或ES2017转为ES5执行。类似这样： 来源： CSDN 作者： cwl_java 链接： https://blog.csdn.net/weixin_42528266/article/details/104030917

ES5新语法主要是体现在Object和、Array操作,同时涉及到JSON、 Function、Date 和 String类型上。 1.Object 　 ES5最大的特点是对象扩展很多方法。 新建对象： create （ 新建一个"干净"的对象，这里的“干净”指的是没有原型链。） 语法： Object .create( proto, [ propertiesObject ]); proto是一个对象，作为新创建对象的原型。 如果 proto 参数不是 null 或一个对象值，则抛出一个 TypeError 异常。null表示没有原型对象(这样就创建了一个”干净的对象”) propertiesObject 是一个对, 它有4个值和两个函数，分别是： value : 设置属性的值 writable : 布尔值,设置属性是否可以被重写,默认属性值为false(不能被重写) enumerable : 布尔值,设置属性是否可以被枚举,默认属性值为false(不能被枚举) configurable : 布尔值,设置属性是否可以被删除，默认属性值为false(不能被删除) 两个函数： get : 函数,设置属性返回结果 set : 函数,有一个参数 来看看具体的用法： writable: var account = Object.create(Object.prototype,{ type: {

构造函数方法很好用，但是存在浪费内存的问题。 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function(song) { console.log(`${this.uname}唱${song}`); } } var s1 = new Star('刘德华', 11); var s2 = new Star('张学友', 22); console.log(s1.sing === s2.sing); // false，说明实例对象的sing方法并不是同一个 来源： https://www.cnblogs.com/jianjie/p/12219340.html

利用webpack解析和打包.vue组件页面 相关知识： vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于webpack的vue-loader才能运行，所以必须安装相关的包。 【注意】 从webpack2.0开始，在webpack.config.js中添加babel:{}是不认识的，需要在项目根目录下新建.babelrc文件，内容填写如下： { presets:['es2015'], //这句代码就是为了解决打包.vue文件不报错 plugins:['transform-runtime'] } View Code 好了，接下来看让一个Vue项目跑起来所需要的步骤： 步骤一：需要安装以下几个包 vue：vue.js核心包 vue-loader：.vue文件编译loader vue-template-compiler：.vue模板编译，被vue-loader所依赖 babel-plugin-transform-runtime：es6实时转换成es5语法 安装vue相关的依赖包（--save-dev意思是将包安装到开发环境下） 接着安装vue核心包（--save意思将包安装到运行环境下） 最终package.json文件内容 { "name": "vue", "version": "1.0.0", "description": "",