vue学习(1)

前置的准备学习:

ES6简单语法:

1.let和const

2.模板字符串

3.箭头函数

4.对象的单体模式

5.es6的面向对象

6.模块化

1.let和const

<script type="text/javascript">
       {
        var a=12;
       } 
       console.log(a);
</script>

浏览器输出12,说明var声明变量的作用域是全局的。

<script type="text/javascript">
       {
        let a=12;
        var a=13;
       } 
       console.log(a);
</script>

浏览器输出报错信息,说明let声明的变量是块级作用域,不能重复声明。

<script>
        var a=[];
        for(var i=0;i<10;i++){
            a[i]=function(){
                console.log(i);
            };
        }
        a[6]();// 10 因为i是用var声明的,作用于全局。
 </script>
<script>
        var a=[];
        for(let i=0;i<10;i++){
            a[i]=function(){
                console.log(i);
            };
        }
        a[6]();// 6 因为不能重复声明,且是块级作用域,所以每一次循环,都是一个新的函数
    </script>
<script>
        const PI=3.14;
        PI=2;//Uncaught TypeError: Assignment to constant variable.at let和const.html:28
    </script>

const是声明一个常量,不可变,重新赋值则会报错。

2.模板字符串

<script>
        var a=1;
        var b=2;
        //var str="哈哈哈"+a+"嘿嘿嘿"+b; //以前的写法
        //console.log(str);//哈哈哈1嘿嘿嘿2
        var str=`哈哈哈${a}嘿嘿嘿${b}`//ES6写法 哈哈哈1嘿嘿嘿2
        console.log(str);
   </script>

3.箭头函数

//无形参
var f=()=>5;
//等同于
var f=function(){return 5};

//多个形参
var sum=(num1,num2)=>num1+num2;
//等同于
var sum=function(num1,num2){return num1+num2;};

箭头函数的两个坑:1.this的指向发生了改变,指向定义对象时的对象window。2.arguments不能使用。

4.对象的单体模式

<script>
        var person={
            name:"张三",
            age:18,
            // fav:function(){
            //     console.log(this);
            // }
            fav(){console.log(this)}
        }
        person.fav();
    </script>

解决箭头函数不能指向本身的问题。字面量方式创建对象。

5.面向对象

es5时的面向对象:

    <script>
        //构造函数的方式来创建对象,面向对象
        function Aniaml(name,age){
            this.name=name;
            this.age=age;
        }
        Aniaml.prototype.showName=function(){
            console.log(this.name)
        };//给对象增加方法

        var dog=new Aniaml('日天',18);
        dog.showName()

    </script>

es6的面向对象

<script>
        class Aniaml{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }//构造方法,且后面不能加逗号
            showName(){
                console.log(this.name)
            }
        }
        var d=new Aniaml('张三',19);
        d.showName();
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

JavaSE学习总结(八)—— 异常处理(Exception)

一、理解异常及异常处理的概念 异常就是在程序的运行过程中所发生的不正常的事件,它会中断正在运行的程序。 异常不是错误 程序中关键的位置有异常处理,提高程序的稳定...

23990
来自专栏用户2442861的专栏

python开发_json_一种轻量级的数据交换格式

==================================================

6410
来自专栏算法修养

PAT 甲级 1060 Are They Equal

1060. Are They Equal (25) 时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B ...

32850
来自专栏Hongten

python开发_json_一种轻量级的数据交换格式

==================================================

13120
来自专栏个人随笔

房上的猫:数组插入算法等难点专开

一:查找算法 public class Aini { public static void main(String[] args) { ...

36180
来自专栏java学习

面试题45(关于修饰符的使用)

关于异常处理机制的叙述正确的是? ---- A default String s B public final static native int w( ) C...

29740
来自专栏大数据钻研

js中call、apply、bind那些事

前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如… 怎么利用call、apply来求一个数组中最大或者最小值...

31350
来自专栏Python中文社区

Python装饰器探秘

add的功能是计算x和y的值,我们称作功能函数。 logger的作业是在执行add函数的同时再打印了其他的信息,这部分的作为add的功能增强,我们称为装饰。 在...

12510
来自专栏数据结构与算法

BZOJ3671: [Noi2014]随机数生成器(贪心)

第1行包含5个整数,依次为 x_0,a,b,c,d ,描述小H采用的随机数生成算法所需的随机种子。第2行包含三个整数 N,M,Q ,表示小H希望生成一个1到 N...

8820
来自专栏Golang语言社区

【Golang语言社区】Golang语言面试题

最近在很多地方看到了golang的面试题,看到了很多人对Golang的面试题心存恐惧,也是为了复习基础,我把解题的过程总结下来。

1.9K250

扫码关注云+社区

领取腾讯云代金券