es6常用功能

前言：学习es6 的语法，记录一些学习心得和总结

class

构造函数


在两段代码下分别打印下列代码

console.log(typeof MathHandle)		 // function
console.log(MathHandle.prototype.constructor === MathHandle) 		// true
console.log(m.__proto__ === MathHandle.prototype) 		// true

会发现两段代码打印结果相同，说明两种写法不同，但原理是相同的

继承

js 语法

打印结果为：

es6 语法

运行结果

总结
通过对比，
class在语法上更加贴合面向对象的写法
class实现继承更加易读、方便理解
它们的本质相同， 都使用了 prototype

Promise

callback 语法

function loadImg(src, callback, fail) {
        var img = document.createElement("img");
        img.onload = function() {
          console.log("img " + img);
          callback(img);
        };
        img.onerror = function() {
          fail();
        };
        img.src = src;
      }
      var src = "https://img.mukewang.com/5d896a620001302d16000540.jpg";
      loadImg(
        src,
        function(img) {
          console.log(img.width);
        },
        function() {
          console.log("failed");
        }
      );

promise

function loadImg(src) {
  const promise = new Promise(function (resolve, reject) {
    var img = document.createElement("img");
    img.onload = function () {
      console.log("img " + img);
      resolve(img);
    };
    img.onerror = function () {
      reject();
    };
    img.src = src;
  })
  return promise
}

var src = "https://img.mukewang.com/5d896a620001302d16000540.jpg"
var result = loadImg(src)

result.then(function (img) {
  console.log(img.width)
},
  function () {
    console.log('failed')
  }
)
result.then(function (img) {
  console.log(img.height)
},
  function () {
    console.log('failed')
  }
)

let/const

//js
var i = 100
i = 200

var j = 100
j = 200

//es6

let i = 100
i = 200   // 正确 let 定义的变量

const j = 100
j = 200   // 报错  const 定义的是常量，定以后不可改变

多行字符串/模板变量

//js
var name = 'zhangsan', age = 20, html = ''
html += '<div>';
html += '<p>' + name + '</p>';
html += '<p>' + age + '</p>';
html += '</div>';

//es6
const name = 'zhangsan', age = 20
const html = `<div>
                <p>${name}</p>
                <p>${age}</p>
              </div>`;      //注意： 这里必须是``，中才能识别${} 
console.log(html)

解构赋值

// js

var obj = { a: 100, b: 200, c: 300 }
var a = obj.a
var b = obj.b
console.log(a)
console.log(b)

var arr = ['xxx', 'yyy', 'zzz']
var x = arr[0]
console.log(x)

//es6
const obj = { a: 100, b: 200, c: 300 }
const { a, c } = obj
console.log(a)
console.log(c)

const arr = ['xxx', 'yyy', 'zzz']
const [x, y, z] = arr
console.log(x)

块级作用域

// js 

var obj = { a: 100, b: 200, c: 300 }
for (var item in obj) {
  console.log(item)
}
console.log(item) // c

// es6

const obj = { a: 100, b: 200, c: 300 }
for (let item in obj) {
  console.log(item)
}
console.log(item)   // undefined

函数默认参数

//js 

function fn(a, b) {
  if (b == null) {
    b = 0
  }
}

// es6
function fn(a, b = 0) {

}

箭头函数

// js 
var arr = [1, 2, 3]
arr.map(function (item) {
  return item + 1
})

// es6

const arr = [1, 2, 3]
arr.map(item => item + 1);
arr.map((item, index) => {
  console.log(index)
  return item + 1
})

注意：箭头函数是普通js函数的一个补充，并不能取代所有普通js, 它最大意思在于将 this 指向函数体之外最近一层的 this 而不是像普通js 一样指向 window 对象

function fn() {
  console.log('real', this)  // {a:100}
  var arr = [1, 2, 3]
  // 普通 js 
  arr.map(function (item) {
    console.log('js', this)   // window
    return item + 1
  })

  // 箭头函数
  arr.map(item => {
    console.log('es6', this)  // {a:100}
    return item + 1
  })
}

fn.call({ a: 100 })

学习中遇到问题写博客记录下过程，新手有不对的地方欢迎指教，QQ：1075606525 ，欢迎大家私聊，一起学习一起进步！！！