zoukankan      html  css  js  c++  java
  • JavaScript基础知识

    0.JavaScript基础知识

    0.1类的基本知识

    ES6语法在类中默认开启了use strict严格模式

    
        class Person{
             constructor(name, age) {
                 this.name = name
                 this.age = age
             }
             speak(a,b){
                 console.log(a,b)
                 console.log(`my name ${this.name}, my age is ${this.age}`)
             }
        }
        const p1 = new Person('jack', 19)
        const p2 = new Person('tony', 18)
        p1.speak()
        p2.speak()
        console.log(p1)
        console.log(p2)
        // 通过call来调用传入一个对象,可接收多个参数传入函数
        p1.speak.call(p1,{a:1},{b:2})
    
        class Student extends Person{
            constructor(name, age, grade) {
                super(name, age);
                this.grade = grade
            }
            speak() {
                console.log(`my name ${this.name}, my age is ${this.age}, in the grade ${this.grade}`,)
            }
            study(){
                console.log(`${this.name} in the learn`)
            }
        }
        s1 = new Student('pick', 17, '高一')
        console.log(s1)
        s1.speak()
        s1.study()
    
        class Car {
            constructor(name, price) {
                this.name = name
                this.price = price
                this.wheel = 4
            }
            a = 1
            wheel = 4
        }
        const  c1 = new Car('c63', 168)
        const  c2 = new Car('rs7', 199)
        console.log(c1)
        console.log(c2)
    
    

    0.2原生事件绑定

    <body>
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
        <button onclick="demo()">按钮3</button>
    
        <script type="text/javascript">
            const btn1 = document.getElementById('btn1')
            btn1.addEventListener('click', ()=>{
                alert('btn1 click')
            })
            const btn2 = document.getElementById('btn2')
            btn2.onclick = () => {
                alert('btn2 click')
            }
            function demo() {
                alert('btn3 click')
            }
        </script>
    </body>
    

    0.3类中方法this的指向

            class Person{
                constructor(name, age) {
                     this.name = name
                     this.age = age
                }
                study(){
                    console.log(this)
                }
    
            }
            const p1 = new Person('tom', 18)
            p1.study()  // 通过实例调用,拿到this
            const x = p1.study
            x()  // 直接调用,this为:undefined
    

    0.4展开运算符

            let arr1 = [1,3,5,7,9]
            let arr2 = [2,4,6,8,10]
            console.log(...arr1) // 展开数组
            let arr3 = [...arr1, ...arr2] // 连接数组,成为一个新数组
            console.log(arr3)
    
            // ...将多个参数转为一个数组
            function sum(...number) {
                // reduce方法将数组的值累加
                return number.reduce((preValue, currentValue) => {
                    // console.log(preValue,currentValue)
                    return preValue + currentValue
                })
            }
            console.log(sum(1,2,3,4))
    
            // 构造字面量对象使用展开语法
            let person = {name: 'kt', age: 18}
            let person2 = {...person} // 复制成一个新对象
            // console.log(...person)  //报错,展开运算符不能直接展开对象
            person.name = 'jerry'
            console.log(person.name)  // jerry
            console.log(person2.name) // kt
    
            let person3 = {...person2, name: 'jack', address: 'sh'} // 生成一个新对象
            console.log(person3)
    

    0.5对象相关方法

        let a = 'name'
        let obj = {}
        obj[a] = 'tom'
        console.log(obj)  // {name: 'tom'}
    

    0.6函数柯里化

    函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收函数最后统一处理的函数编码形式

        function sum(a) {
            return (b) => {
                return (c) => {
                    return a + b + c
                }
            }
        }
        const result = sum(1)(2)(3)
        console.log(result)
    
  • 相关阅读:
    SQL Azure (17) SQL Azure V12
    Microsoft Azure News(5) Azure新DV2系列虚拟机上线
    Azure Redis Cache (3) 在Windows 环境下使用Redis Benchmark
    Azure PowerShell (11) 使用自定义虚拟机镜像模板,创建Azure虚拟机并绑定公网IP(VIP)和内网IP(DIP)
    Windows Azure Virtual Machine (31) 迁移Azure虚拟机
    Windows Azure Web Site (16) Azure Web Site HTTPS
    Azure China (12) 域名备案问题
    一分钟快速入门openstack
    管理员必备的Linux系统监控工具
    Keepalived+Nginx实现高可用和双主节点负载均衡
  • 原文地址:https://www.cnblogs.com/guapitomjoy/p/15223239.html
Copyright © 2011-2022 走看看