原生JavaScript基础预备知识 和 面向对象的写法(ES6)

javascript基础知识点快速过一遍，为学习vue做准备，参照着菜鸟教程官网走的。
然后稍微写了一些基础的代码 ， 代码全部托管到 github上面 base_learn目录 文件
https://github.com/CoderCharm/vue_study_demo/tree/master/base_learn
稍微说一句， 我是有其他语言基础Python 加上以前在学校的时候自学过html+css 和简单的js，有过前端基础， 所以很快速的就过一遍语法， 如果没有其他知识，那就的多花时间练习基础了
更多进阶教程：
Mozilla官方教程: https://developer.mozilla.org/zh-CN/docs/Web/Tutorials
阮一峰：http://www.ruanyifeng.com/blog/javascript/
廖雪峰：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

• 变量的声明 和ES6新加的 let const 关键字
• 基本的一些事件演示
• 字符串操作 （重点）
• 语句的基本写法，if for switch 看一遍就会了
• js正则
• 异常机制 try catch
• 变量的提升 （感觉一般正常人不会这么做！严格模式下就不写）
• 常见误区 如 === 和 == 区别, + 号 连接符和算术运算符的区别
• 基础的表单验证
• 函数的写法 以及用法 然后 默认参数和缺省参数的用法 (重点)
• 面向对象的写法 以下时面向对象代码练习 （重点）
• Dom操作
• Bom操作
• 定时器 Cookie操作
• 常见内置对象操作Math, Date

https://github.com/CoderCharm/vue_study_demo

<script>
    // 面向对象代码 练习

    // 对象
    var myObject = {
        name: "wang",
        hobby: ["play", "read", 'run'],
        ability: function () {
            console.log("program with javascript");
        }

    };
    // 为什么不new实例对象  直接用类对象 不理解
    myObject.ability();

    // 构造函数:
    function MyHero(arg) {
        var firstName = "tom";    // 私有属性，只能在对象构造函数内部使用
        this.lastName = arg;     // //公有属性,在对象实例化后调用

        // constructor(name){     // 额 不行  不是我想的构造方法  ES6 才更符合
        //     this.name = name
        // }

        // 对象方法
        this.ability = function (n) {
            console.log(n);
            console.log("fly");
        }
    }

    MyHero.Run = function () {
        alert("我是类方法 Run");
    };

    // This creates a new object
    var x = new MyHero("John");     // 构造函数赋值   真的不能理解 这种写法 好别扭
    console.log(x.firstName);       // 返回 undefined
    console.log(x.lastName);        // 返回 "Doe"
    x.ability(123);     // 调用对象方法



    console.log("-----分割线--ES6语法------以下方法更符合Python思想---");
    class Animal{
        constructor(animalType){
            // 构造方法
            this.animalType = animalType
        }
        eat(food){
            console.log("eat " + food)
        }
    }

    class Dog extends Animal{
        // 继承对象 Animal 类
        constructor(name, color, animalType) {
            // 继承对象时需要用 super方法给对象传入参数
            super(animalType);
            this.name = name;
            this.color = color
        }
        getName() {
           return this.name
        }
        getColor(){
            return this.color
        }

        eat(food){
            // 调用父类方法  可以不写super 直接覆盖 父类方法
            super.eat(food);

            return this.name + ' 吃 ' + food
        }

    }

    let tom = new Dog("Tom", 'white', '斑点狗');
    let jerry = new Dog("Jerry", 'yellow', '小泰迪');

    // console.log(tom.getName());    // 调用实例方法
    console.log(jerry.animalType);  //调用父类 实例属性
    console.log(jerry.eat("骨头"));  //调用父类 实例属性
    console.log(jerry.getName());
    console.log(tom.getColor());
    console.log(tom.eat("肉"));
    console.log(tom.animalType);


</script>

源代码

https://github.com/CoderCharm/vue_study_demo