Vue(一)之ES6基础

01-先了解ES6语法

1.声明变量let和const

<script type="javascript">

    //es5声明变量 var 先声明，后赋值
    //var a = 10;
    //console.log(a);

    //因变量提升 导致 1.var声明的变量属于 全局作用域;
    //2.var声明的变量存在覆盖现象;
    var a;
    console.log(a);
    {
        a = 20;
        //var a = 30;
    }
    console.log(a);

    //打印结果：i=10
    for (var i = 0; i<10; i++){

    }
    console.log(i);

    //es6声明变量 let和const
    //let 声明变量的好处：1.属于局部作用域；2.没有覆盖现象
    //const 声明的是 常量, 1.这个常量一旦声明 就不可修改；2.局部作用域；
    const pai = 3.14;
</script>

2.模板字符串

语法:` ${变量名} `

注：` ` 是tab键上面的反引号。

<body>
<ul>
    <li>
        <a href="javascript:;">
            <img src="" alt="">
        </a>
    </li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="javascript">
    //es6模板字符串
    /*
    let name='hyp';
    let age=18;

    // `` 使用反引号
    let desc=`${name}的年龄是${age}`;//'hyp的年龄是18'
    console.log(desc);
    */

    //示例
    let imgSrc = './1.png';
    $(function () {
        $('ul').append(
            `<ul>
                <li>
                    <a href="javascript:;">
                        <img src="${imgSrc}" alt="">
                    </a>
                </li>
            </ul>`
        );
    })
</script>
</body>

3.函数的书写

es6箭头函数的书写：

function() {} 等价于 ()=>{}

箭头函数的使用 带来的问题：
    1.使用使用箭头函数this的指向发生了改变
    2.使用箭头函数 arguments 不能使用

<script type="text/javascript">
    /*
    普通函数
    function add(a,b) {
        return a+b;
    };

    alert(add(1,2));
    */
    
    /*
    // 函数对象
    var add  = function (a,b) {
        return a+b;
    };

    alert(add(3,4))
    */

    /*
    var add = (a,b)=>{
        return a+b;
    };
    alert(add(3,7))
    */

    /*
    var person = {
        name:"alex",
        age: 20,
        fav:function () {
            console.log('喜欢AV');
            // this指的是当前的对象
            console.log(this.age);
        }
    };

    person.fav();
    */

    /*
    var person = {
        name:"alex",
        age: 20,
        fav: () => {
            // this的指向发生了改变,指向了定义person的父级对象 window
            console.log('喜欢AV');
            console.log(this);
        }
    };

    person.fav();
    */
    /*
    var person = {
        name:"alex",
        age: 20,
        fav: function () {
            console.log('喜欢AV');
            // this指的是当前的对象
            console.log(this);
            console.log(arguments[0])
        }
    };

    person.fav('哈哈哈');
    */
    var person = {
        name:"alex",
        age: 20,
        fav: (content) =>{
            // this的指向发生了改变,指向了定义person的父级对象 window
            console.log('喜欢AV');
            
            console.log(this);
　　　　　　　//arguments 是实参，此处结果为 undefined
            // console.log(arguments)
        }
    };

    person.fav('哈哈哈');

</script>

4.对象的创建

es6中对象的单体模式

fav(){} 等价于 function fav(){} 等价于 var fav = function(){}

<script type="text/javascript">
    
    // 字面量方式创建对象
    /*
    var person = {
        name:"alex",
        age: 20,
        fav:function () {
            console.log('喜欢AV');
            // this指的是当前的对象
            console.log(this.age);
        }
    };

    person.fav();
    */

    // es6中对象的单体模式
    var person = {
        name:"alex",
        age: 20,
        fav(){
　　　　　　  //此处的this 指的是 当前对象Object；
　　　　　　  //使用单体模式 解决了 箭头函数的this指向的问题 和 arguments 也可以使用了
            console.log(this);
            console.log(arguments);
        }
    };
    person.fav();
    
</script>

5.es6中类的概念class

<script type="text/javascript">
    
    /*
    function Person(name,age){
        this.name = name;
        this.age = age;
    }

    Person.prototype.showName = function(){
        alert(this.name);
    };

    // 使用new关键字来创建对象

    var p = new Person('alex',19);
    p.showName()
    */
    
    
    // es6中创建对象的方式 使用class
    class Person{
　　　　 //constructor 相当于 __init__
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
　　　　 //函数
        showName(){
            alert(this.name);
        }
    }
　　// 相当于实例化对象
    var p2 = new Person('张三',20);
    p2.showName();
</script>

6.global对象

ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。
　　1.浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
　　2.浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
　　3.Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。
　　1.全局环境中，this会返回顶层对象。但是，Node 模块和 ES6 模块中，this返回的是当前模块。
　　2.函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
　　3.不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。
　　  但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。
综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。

// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

// CommonJS 的写法
require('system.global/shim')();

// ES6 模块的写法
import shim from 'system.global/shim'; shim();

上面代码可以保证各种环境里面，global对象都是存在的。

// CommonJS 的写法
var global = require('system.global')();

// ES6 模块的写法
import getGlobal from 'system.global';
const global = getGlobal();

上面代码将顶层对象放入变量global。

01-先了解ES6语法

1.声明变量let和const

2.模板字符串

3.函数的书写

4.对象的创建

5.es6中类的概念class

6.global对象

猜你喜欢