一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
（一）Decorator 修饰器
修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持。
需要先安装一个插件：
npm install babel-plugin-transform-decorators-legacy --save-dev
然后在项目根目录下，找到：.babelrc=>修改为
"plugins": ["transform-runtime","transform-decorators-legacy"],
//添加属性，添加方法，在方法执行之前添加动作
1.给添加一个静态方法(属性)
function chooseCourse(target){
target.cours='物理';
}
function classroom(target) {
target.study=function(){
console.log(target.identity+'学习');
}
}
@chooseCourse
@classroom
class Student {
}
Student.study();
2.修饰器带参数
function chooseCourse(courseName){
return function(target){
target.courseName=courseName;
}
}
function classroom(roomName){
return function(target){
target.study=function(){
console.log('在'+roomName+'学习'+target.courseName);
}
}
}
@chooseCourse('物理')
@classroom('第1教室')
class Student {
}
Student.study();
3.修饰器不仅可以修饰类，还可以修饰类的方法(属性)
function chooseCourse(courseName){
return function(target){
console.log('检查准考证:'+target.uid); //target中的this发生指针转移
target.courseName=courseName;
}
}
class Student {
constructor(){
this.uid=15;
}
@chooseCourse('物理')
exam(){
console.log(this.uid+'考试,考:'+this.courseName);
}
}
//Student.study();
let student = new Student();
//student.uid=15;
student.exam();
4.修饰器只能用于类和类的方法，不能用于函数，会导致函数提升而发生错误
//---------错误-------------------------
@chooseCourse('物理')
function Teacher(){
teach(){
console.log('讲师教:'+this.courseName);
}
}
Teacher.teach();
5.装饰模式与代理模式的差别
装饰器模式关注于在一个对象上动态的添加方法，然而代理模式关注于控制对对象的访问。换句话 说，用代理模式，代理类（proxy class）可以对它的客户隐藏一个对象的具体信息。因此，当使用代理模式的时候，我们常常在一个代理类中创建一个对象的实例。并且，当我们使用装饰器模 式的时候，我们通常的做法是将原始对象作为一个参数传给装饰者的构造器。
使用代理模式，代理和真实对象之间的的关系通常在编译时就已经确定了，而装饰者能够在运行时递归地被构造。
（二）二进制数组
es6中二进制数组包括：用
ArrayBuffer对象
TypedArray视图
DataView视图
ArrayBuffer对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。
用来存储文件，流等数据的存储
以ArrayBuffer对象为例：
<input type='file' name='fileInput' id='fileInput' v-on:change='showImg'/>
<img :src ="buffer"/>
<script>
function arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
var thisa;
export default {
name: 'hello',
data () {
studyEs6();
return {
buffer:'data:image/png;base64,',
msg: '欢迎 to Your Vue.js App',
}
},
created (){
thisa=this;
},
methods: {
showImg:function(){
//alert(thisa);
var fileInput = document.getElementById('fileInput');
//alert(fileInput);
var file = fileInput.files[0];
//alert(file);
var reader = new FileReader();
//alert(reader);
reader.readAsArrayBuffer(file);
reader.onload = function () {
var arrayBuffer = reader.result;//reader.result.toByteArray;
//alert(thisa.msg);
let arrayBase = arrayBufferToBase64(arrayBuffer);
thisa.buffer='data:image/png;base64,'+arrayBase;
};
}
}
}
function studyEs6(){
}
</script>
