• ES6中 的类(class)


    程序中类:

            面向对象,类
                    属性:
                    方法:
            函数模拟:

            人:Person
                属性:name
                展示名字:showName

        Es5:
            function Person(){
                this.name = "aaa",
            }
            Person.prototype.showName=function(){}

            Object.assign( Person.prototype,{
                showName(){},
                showAge(){}
            })
        ES6:
            class :
                constructor(){}  <!-- 构造方法(函数),只要调用new,自动执行 -->

                1. class Person{
                    constructor(name,age){
                        <!-- 构造方法(函数),只要调用new,自动执行 -->
                        console.log("构造函数执行了");
                    }
                    showName(){}
                }
                let p = new Person("颉旺飞",18);

                2. 
                    const Person = class{}

                3. 
                    let a = "strive";
                    let b = "method";
                    class Person{
                        [a+b](){}            
                    }
            注意:
                1. ES6里面class没有提升功能,在ES5,用函数模拟可以,默认函数提升
                2. ES6中this比之前轻松多了
            

            矫正this:
                1. fn.call(this指向谁,arg1,arg2...)
                2. fn.apply(this指向谁,[arg1,arg2...])
                3. fn.bind()
            
            class里面取值函数(getter),存值函数(setter)

            静态方法:就是类身上的方法
                    static aaa(){}
                    父类.aaa();
         
            继承:extends
                // 父类
                class Person{
                    constructor(name) {
                        this.name = name
                    }
                    showName(){
                        return `名字为:${this.name}`
                    }
                }
                // 子类
                class Student extends Person {} <!-- extends 继承 -->
                // 调用
                let stu1 = new Student("");
                console.log(stu1.showName());
  • 相关阅读:
    js少写if语句
    框架大集合
    new运算符工作原理(new运算符的伪码实现)
    原始数据类型和引用数据类型
    关于input 的选中,自定义input[type="checkbox"]样式
    css伪类与伪元素
    js 的function为什么可以添加属性
    工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等
    多种框架好库的混合使用
    js预编译的四部曲
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/13819134.html
Copyright © 2020-2023  润新知