国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<style id="828vn"></style>

<noscript id="828vn"></noscript>

<style id="828vn"></style>

JavaScript ES6實現(xiàn)繼承

2年前作者：木公176分類：Toy博客閱讀(26)違法舉報

這篇具有很好參考價值的文章主要介紹了JavaScript ES6實現(xiàn)繼承。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1 對象的方法補充

2 原型繼承關(guān)系圖

3 class方式定義類

4 extends實現(xiàn)繼承

5 extends實現(xiàn)繼承

6 多態(tài)概念的理

function 創(chuàng)建的名稱如果開頭是大寫的，那這個創(chuàng)建的不是函數(shù)，是創(chuàng)建了類。

?ES6-class類中的內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var obj = {
      running: function() {},
      eating: () => {},
      swimming() {

      }
    }

    // function Person() {

    // }

    // Person.prototype.running = function() {

    // }

    // 編程: 高內(nèi)聚低耦合
    class Person {
      // 1.類中的構(gòu)造函數(shù)
      // 當(dāng)我們通過new關(guān)鍵字調(diào)用一個Person類時, 默認(rèn)調(diào)用class中的constructor方法
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      // 2.實例方法
      // 本質(zhì)上是放在Person.prototype
      running() {
        console.log(this.name + " running~")
      }
      eating() {
        console.log(this.name + " eating~")
      }
    }

    // 創(chuàng)建實例對象
    var p1 = new Person("why", 18)

    // 使用實例對象中屬性和方法
    console.log(p1.name, p1.age)
    p1.running()
    p1.eating()

    // 研究內(nèi)容
    console.log(Person.prototype === p1.__proto__)
    console.log(Person.running) // 不能調(diào)用
    console.log(Person.prototype.running) // 可以調(diào)用

  </script>

</body>
</html>

ES6-class和function類的區(qū)別

可以把class創(chuàng)建的類當(dāng)做是function創(chuàng)建的類的一種語法糖。但是在直接使用的方面是有不同之處。類里面的方法又叫靜態(tài)方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // function定義類
    function Person1(name, age) {
      this.name = name
      this.age = age
    }

    Person1.prototype.running = function() {}
    Person1.prototype.eating = function() {}

    var p1 = new Person1("why", 18)
    console.log(p1.__proto__ === Person1.prototype)
    console.log(Person1.prototype.constructor)
    console.log(typeof Person1) // function

    // 不同點: 作為普通函數(shù)去調(diào)用
    Person1("abc", 100)

    // class定義類
    class Person2 {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      running() {}
      eating() {}
    }

    var p2 = new Person2("kobe", 30)
    console.log(p2.__proto__ === Person2.prototype)
    console.log(Person2.prototype.constructor)
    console.log(typeof Person2)

    // 不同點: class定義的類, 不能作為一個普通的函數(shù)進(jìn)行調(diào)用
    Person2("cba", 0)

  </script>

</body>
</html>

ES6-對象訪問器方法的編寫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 針對對象
    // 方式一: 描述符
    // var obj = {
      // _name: "why"
    // }
    // Object.defineProperty(obj, "name", {
    //   configurable: true,
    //   enumerable: true,
    //   set: function() {
    //   },
    //   get: function() {
    //   }
    // })

    // 方式二: 直接在對象定義訪問器
    // 監(jiān)聽_name什么時候被訪問, 什么設(shè)置新的值
    var obj = {
      _name: "why",
      // setter方法
      set name(value) {
        this._name = value
      },
      // getter方法
      get name() {
        return this._name
      }
    }

    obj.name = "kobe"
    console.log(obj.name)

  </script>

</body>
</html>

ES6-類的訪問器方法的編寫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.訪問器的編寫方式
    // class Person {
    //   // 程序員之間的約定: 以_開頭的屬性和方法, 是不在外界訪問
    //   constructor(name, age) {
    //     this._name = name
    //   }

    //   set name(value) {
    //     console.log("設(shè)置name")
    //     this._name = value
    //   }

    //   get name() {
    //     console.log("獲取name")
    //     return this._name
    //   }
    // }

    // var p1 = new Person("why", 18)
    // p1.name = "kobe"
    // console.log(p1.name)
    // // console.log(p1._name)

    // var p2 = new Person("james", 25)
    // console.log(p2.name)


    // 2.訪問器的應(yīng)用場景
    class Rectangle {
      constructor(x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      }

      get position() {
        return { x: this.x, y: this.y }
      }

      get size() {
        return { width: this.width, height: this.height }
      }
    }

    var rect1 = new Rectangle(10, 20, 100, 200)
    console.log(rect1.position)
    console.log(rect1.size)

  </script>

</body>
</html>

ES6-類的靜態(tài)方法的編寫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // function Person() {}
    // // 實例方法
    // Person.prototype.running = function() {}
    // // 類方法
    // Person.randomPerson = function() {}

    // var p1 = new Person()
    // p1.running()
    // Person.randomPerson()

    // class定義的類
    var names = ["abc", "cba", "nba", "mba"]
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      // 實例方法
      running() {
        console.log(this.name + " running~")
      }
      eating() {}

      // 類方法(靜態(tài)方法)
      static randomPerson() {
        console.log(this)
        var randomName = names[Math.floor(Math.random() * names.length)]
        return new this(randomName, Math.floor(Math.random() * 100))
      }
    }

    var p1 = new Person()
    p1.running()
    p1.eating()
    var randomPerson = Person.randomPerson()
    console.log(randomPerson)

  </script>

</body>
</html>

ES6-通過extends實現(xiàn)繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 定義父類
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      running() {
        console.log("running~")
      }
      eating() {
        console.log("eating~")
      }

    }

    class Student extends Person {
      constructor(name, age, sno, score) {
        // this.name = name
        // this.age = age
        super(name, age)
        this.sno = sno
        this.score = score
      }

      // running() {
      //   console.log("running~")
      // }
      // eating() {
      //   console.log("eating~")
      // }

      studying() {
        console.log("studying~")
      }
    }

    var stu1 = new Student("why", 18, 111, 100)
    stu1.running()
    stu1.eating()
    stu1.studying()

    
    class Teacher extends Person {
      constructor(name, age, title) {
        // this.name = name
        // this.age = age
        super(name, age)
        this.title = title
      }

      // running() {
      //   console.log("running~")
      // }
      // eating() {
      //   console.log("eating~")
      // }

      teaching() {
        console.log("teaching~")
      }
    }


  </script>

</body>
</html>

ES6-super關(guān)鍵字的其他用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    class Animal {
      running() {
        console.log("running")
      }
      eating() {
        console.log("eating")
      }

      static sleep() {
        console.log("static animal sleep")
      }
    }

    class Dog extends Animal {
      // 子類如果對于父類的方法實現(xiàn)不滿足(繼承過來的方法)
      // 重新實現(xiàn)稱之為重寫(父類方法的重寫)
      running() {
        console.log("dog四條腿")
        // 調(diào)用父類的方法
        super.running()
        // console.log("running~")
        // console.log("dog四條腿running~")
      }

      static sleep() {
        console.log("趴著")
        super.sleep()
      }
    }

    var dog = new Dog()
    dog.running()
    dog.eating()

    Dog.sleep()

  </script>

</body>
</html>

繼承自內(nèi)置類的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.創(chuàng)建一個新的類, 繼承自Array進(jìn)行擴(kuò)展
    class HYArray extends Array {
      get lastItem() {
        return this[this.length - 1]
      }

      get firstItem() {
        return this[0]
      }
    }

    var arr = new HYArray(10, 20, 30)
    console.log(arr)
    console.log(arr.length)
    console.log(arr[0])
    console.log(arr.lastItem)
    console.log(arr.firstItem)

    // 2.直接對Array進(jìn)行擴(kuò)展
    Array.prototype.lastItem = function() {
      return this[this.length - 1]
    }

    var arr = new Array(10, 20, 30)
    console.log(arr.__proto__ === Array.prototype)
    console.log(arr.lastItem())

    // 函數(shù)apply/call/bind方法 -> Function.prototype

  </script>

</body>
</html>

ES6-類的混入mixin的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // JavaScript只支持單繼承(不支持多繼承)
    function mixinAnimal(BaseClass) {
      return class extends BaseClass {
        running() {
          console.log("running~")
        }
      }
    }

    function mixinRunner(BaseClass) {
      return class extends BaseClass {
        flying() {
          console.log("flying~")
        }
      }
    }

    class Bird {
      eating() {
        console.log("eating~")
      }
    }

    // var NewBird = mixinRunner(mixinAnimal(Bird))
    class NewBird extends mixinRunner(mixinAnimal(Bird)) {
    }
    var bird = new NewBird()
    bird.flying()
    bird.running()
    bird.eating()

  </script>

</body>
</html>

ES6-ES6中的class轉(zhuǎn)ES5代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // class Person {
    //   constructor(name, age) {
    //     this.name = name
    //     this.age = age
    //   }

    //   running() {}
    //   eating() {}

    //   static randomPerson() {}
    // }

    // var p1 = new Person()
  </script>
  <script src="./js/es5_code01.js"></script>

</body>
</html>

可以去babel官網(wǎng)打開try out，然后改default。

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

ES6-Java面向?qū)ο蟮亩鄳B(tài)理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 繼承是多態(tài)的前提
    // shape形狀
    class Shape {
      getArea() {}
    }

    class Rectangle extends Shape {
      constructor(width, height) {
        super()
        this.width = width
        this.height = height
      }

      getArea() {
        return this.width * this.height
      }
    }

    class Circle extends Shape {
      constructor(radius) {
        super()
        this.radius = radius
      }

      getArea() {
        return this.radius * this.radius * 3.14
      }
    }

    var rect1 = new Rectangle(100, 200)
    var rect2 = new Rectangle(20, 30)
    var c1 = new Circle(10)
    var c2 = new Circle(15)

    // 表現(xiàn)形式就是多態(tài)
    /*
      在嚴(yán)格意義的面向?qū)ο笳Z言中, 多態(tài)的是存在如下條件的:
        1.必須有繼承(實現(xiàn)接口)
        2.必須有父類引用指向子類對象
    */
    function getShapeArea(shape) {
      console.log(shape.getArea())
    }

    getShapeArea(rect1)
    getShapeArea(c1)

    
    var obj = {
      getArea: function() {
        return 10000
      }
    }

    getShapeArea(obj)
    getShapeArea(123)

  </script>

</body>
</html>

ES6-JS面向?qū)ο蟮亩鄳B(tài)理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 多態(tài)的表現(xiàn): JS到處都是多態(tài)
    function sum(a1, a2) {
      return a1 + a2
    }

    sum(20, 30)
    sum("abc", "cba")
    
    // 多態(tài)的表現(xiàn)
    var foo = 123
    foo = "Hello World"
    console.log(foo.split())
    foo = {
      running: function() {}
    }
    foo.running()
    foo = []
    console.log(foo.length)

  </script>

</body>
</html>

ES6-對象字面量的增強寫法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    /*
      1.屬性的增強
      2.方法的增強
      3.計算屬性名的寫法
    */

    var name = "why"
    var age = 18

    var key = "address" + " city"

    var obj = {
      // 1.屬性的增強
      name,
      age,

      // 2.方法的增強
      running: function() {
        console.log(this)
      },
      swimming() {
        console.log(this)
      },
      eating: () => {
        console.log(this)
      },

      // 3.計算屬性名
      [key]: "廣州"
    }

    obj.running()
    obj.swimming()
    obj.eating()

    function foo() {
      var message = "Hello World"
      var info = "my name is why"

      return { message, info }
    }

    var result = foo()
    console.log(result.message, result.info)

  </script>

</body>
</html>

ES6-數(shù)組和對象的解構(gòu)語法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var names = ["abc", "cba", undefined, "nba", "mba"]


    // 1.數(shù)組的解構(gòu)
    // var name1 = names[0]
    // var name2 = names[1]
    // var name3 = names[2]
    // 1.1. 基本使用
    // var [name1, name2, name3] = names
    // console.log(name1, name2, name3)

    // 1.2. 順序問題: 嚴(yán)格的順序
    // var [name1, , name3] = names
    // console.log(name1, name3)

    // 1.3. 解構(gòu)出數(shù)組
    // var [name1, name2, ...newNames] = names
    // console.log(name1, name2, newNames)

    // 1.4. 解構(gòu)的默認(rèn)值
    var [name1, name2, name3 = "default"] = names
    console.log(name1, name2, name3)


    // 2.對象的解構(gòu)
    var obj = { name: "why", age: 18, height: 1.88 }
    // var name = obj.name
    // var age = obj.age
    // var height = obj.height
    // 2.1. 基本使用
    // var { name, age, height } = obj
    // console.log(name, age, height)

    // 2.2. 順序問題: 對象的解構(gòu)是沒有順序, 根據(jù)key解構(gòu)
    // var { height, name, age } = obj
    // console.log(name, age, height)


    // 2.3. 對變量進(jìn)行重命名
    // var { height: wHeight, name: wName, age: wAge } = obj
    // console.log(wName, wAge, wHeight)

    // 2.4. 默認(rèn)值
    var { 
      height: wHeight, 
      name: wName, 
      age: wAge, 
      address: wAddress = "中國"
    } = obj
    console.log(wName, wAge, wHeight, wAddress)

    // 2.5. 對象的剩余內(nèi)容
    var {
      name,
      age,
      ...newObj
    } = obj
    console.log(newObj)


    // 應(yīng)用: 在函數(shù)中(其他類似的地方)
    //  function getPosition(position)直接把position解構(gòu)成{ x, y }，方便拿對象里面的參數(shù)
    function getPosition({ x, y }) {
      console.log(x, y)
    }

    getPosition({ x: 10, y: 20 })
    getPosition({ x: 25, y: 35 })

    function foo(num) {}

    foo(123)

  </script>

</body>
</html>

補充-手寫apply-call函數(shù)實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // new Function()
    // foo.__proto__ === Function.prototype
    function foo(name, age) {
      console.log(this, name, age)
    }

    // foo函數(shù)可以通過apply/call
    // foo.apply("aaa", ["why", 18])
    // foo.call("bbb", "kobe", 30)

    // 1.給函數(shù)對象添加方法: hyapply
    Function.prototype.hyapply = function(thisArg, otherArgs) {
      // this -> 調(diào)用的函數(shù)對象
      // thisArg -> 傳入的第一個參數(shù), 要綁定的this
      // console.log(this) // -> 當(dāng)前調(diào)用的函數(shù)對象
      // this.apply(thisArg)

      thisArg.fn = this

      // 1.獲取thisArg, 并且確保是一個對象類型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: this
      })
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }

    // foo.hyapply({ name: "why" }, ["james", 25])
    // foo.hyapply(123, ["why", 18])
    // foo.hyapply(null, ["kobe", 30])


    // 2.給函數(shù)對象添加方法: hycall
    Function.prototype.hycall = function(thisArg, ...otherArgs) {
      // 1.獲取thisArg, 并且確保是一個對象類型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: this
      })
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }
    
    foo.hycall({ name: "why", fn: "abc" }, "james", 25)
    foo.hycall(123, "why", 18)
    foo.hycall(null, "kobe", 30)


  </script>

</body>
</html>

補充-手寫apply-call抽取封裝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // new Function()
    // foo.__proto__ === Function.prototype
    function foo(name, age) {
      console.log(this, name, age)
    }

    // foo函數(shù)可以通過apply/call
    // foo.apply("aaa", ["why", 18])
    // foo.call("bbb", "kobe", 30)

    // 1.封裝思想
    // 1.1.封裝到獨立的函數(shù)中
    function execFn(thisArg, otherArgs, fn) {
      // 1.獲取thisArg, 并且確保是一個對象類型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: fn
      })

      // 執(zhí)行代碼
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }

    // 1.2. 封裝原型中
    Function.prototype.hyexec = function(thisArg, otherArgs) {
      // 1.獲取thisArg, 并且確保是一個對象類型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: this
      })
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }


    // 1.給函數(shù)對象添加方法: hyapply
    Function.prototype.hyapply = function(thisArg, otherArgs) {
      this.hyexec(thisArg, otherArgs)
    }
    // 2.給函數(shù)對象添加方法: hycall
    Function.prototype.hycall = function(thisArg, ...otherArgs) {
      this.hyexec(thisArg, otherArgs)
    }

    foo.hyapply({ name: "why" }, ["james", 25])
    foo.hyapply(123, ["why", 18])
    foo.hyapply(null, ["kobe", 30])
    
    foo.hycall({ name: "why" }, "james", 25)
    foo.hycall(123, "why", 18)
    foo.hycall(null, "kobe", 30)


  </script>

</body>
</html>

補充-手寫bind函數(shù)的實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // apply/call
    function foo(name, age, height, address) {
      console.log(this, name, age, height, address)
    }

    // Function.prototype
    // var newFoo = foo.bind({ name: "why" }, "why", 18)
    // newFoo(1.88)

    // 實現(xiàn)hybind函數(shù)
    Function.prototype.hybind = function(thisArg, ...otherArgs) {
      // console.log(this) // -> foo函數(shù)對象
      thisArg = thisArg === null || thisArg === undefined ? window: Object(thisArg)
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        writable: false,
        value: this
      })

      return (...newArgs) => {
        // var allArgs = otherArgs.concat(newArgs)
        var allArgs = [...otherArgs, ...newArgs]
        thisArg.fn(...allArgs)
      }
    }

    var newFoo = foo.hybind("abc", "kobe", 30)
    newFoo(1.88, "廣州市")
    newFoo(1.88, "廣州市")
    newFoo(1.88, "廣州市")
    newFoo(1.88, "廣州市")

  </script>

</body>
</html>

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端

JavaScript ES6實現(xiàn)繼承,javascript高級,javascript,es6,前端文章來源地址http://www.zghlxwxcb.cn/news/detail-574131.html

到了這里，關(guān)于JavaScript ES6實現(xiàn)繼承的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

JavaScript 之 ES6 新特性
在ES6中，模塊化成為了JavaScript的標(biāo)準(zhǔn)特性。ES6模塊化提供了一種更加優(yōu)雅和可維護(hù)的方式來組織和管理JavaScript代碼，可以有效地避免全局變量的污染和命名沖突的問題。以下是ES6模塊化的一些主要特性：導(dǎo)出（export）：可以通過 export 將一個變量、函數(shù)或類導(dǎo)出為一
2024年02月07日
瀏覽(26)
JavaScript Es6_3筆記
了解構(gòu)造函數(shù)原型對象的語法特征，掌握 JavaScript 中面向?qū)ο缶幊痰膶崿F(xiàn)方式，基于面向?qū)ο缶幊趟枷雽崿F(xiàn) DOM 操作的封裝。了解面向?qū)ο缶幊痰囊话闾卣?掌握基于構(gòu)造函數(shù)原型對象的邏輯封裝掌握基于原型對象實現(xiàn)的繼承理解什么原型鏈及其作用能夠處理程序異常提升程
2024年02月11日
瀏覽(23)
JavaScript版本ES5/ES6及后續(xù)版本
Brendan Eich在短短10天內(nèi)創(chuàng)建了JavaScript的第一個版本。它被稱為摩卡，但已經(jīng)具備了現(xiàn)代JavaScript的許多基本特性! 為了吸引Java開發(fā)人員，Mocha先是更改為LiveScript，然后又更改為JavaScript然而,JavaScript與Java幾乎沒有任何關(guān)系；微軟推出了IE，從網(wǎng)景復(fù)制JavaScript，并稱之為JScript; 由
2024年02月13日
瀏覽(33)
【Javascript】ES6新增之類的認(rèn)識
在現(xiàn)代編程語言中，類是面向?qū)ο缶幊谭妒街械暮诵母拍钪弧?與函數(shù)類似，類本質(zhì)上是一種特殊的函數(shù)，它允許我們將數(shù)據(jù)和操作封裝在一起，以創(chuàng)建具有共同行為和狀態(tài)的對象。在類的世界里，我們有類表達(dá)式和類聲明，它們各自具有自己的特性和用途。 ? 類本質(zhì)上是
2024年02月13日
瀏覽(25)
JavaScript學(xué)習(xí)筆記01（包含ES6語法）
Js 最初被創(chuàng)建的目的是“使網(wǎng)頁更生動”。 Js 寫出來的程序被稱為腳本，Js 是一門腳本語言。被直接寫在網(wǎng)頁的 HTML 中，在頁面加載的時候自動執(zhí)行腳本被以純文本的形式提供和執(zhí)行，不需要特殊的準(zhǔn)備或編譯即可運行（JIN compiler） Js 不僅可以在瀏覽器中執(zhí)行，也可以在
2024年02月16日
瀏覽(31)
【ES6】 JavaScript 中的Object.assign
Object.assign() 是 JavaScript 中的一個方法，它用于復(fù)制源對象的所有可枚舉屬性到目標(biāo)對象。該方法會返回目標(biāo)對象。這是其基本用法：在這個例子中，source 對象的所有可枚舉屬性都被復(fù)制到了 target 對象。需要注意的是，Object.assign() 是淺復(fù)制（shallow copy），意味著如果源對
2024年02月10日
瀏覽(21)
15 JavaScript ES6中的箭頭函數(shù)
15 JavaScript ES6中的箭頭函數(shù) 什么是箭頭函數(shù) ES6中允許使用=來定義函數(shù)。箭頭函數(shù)相當(dāng)于匿名函數(shù)，并簡化了函數(shù)定義。基本語法箭頭函數(shù)在語法上比普通函數(shù)簡潔多。箭頭函數(shù)就是采用箭頭=來定義函數(shù)，省去function。函數(shù)的參數(shù)放在=前面的括號中，函數(shù)體跟在=后的
2024年02月12日
瀏覽(21)
探索ES6：JavaScript的下一代標(biāo)準(zhǔn)
ES6，也稱為ECMAScript 2015，是JavaScript的下一代標(biāo)準(zhǔn)，引入了許多新的語言特性和改進(jìn)，使得JavaScript代碼更加現(xiàn)代化、簡潔和易于維護(hù)。本文將介紹ES6的一些主要特性以及它們在JavaScript開發(fā)中的應(yīng)用。 ES6引入了 let 和 const 來聲明變量。與 var 不同， let 聲明的變量具有塊
2024年02月22日
瀏覽(27)
JavaScript:模塊化【CommonJS與ES6】
在 JavaScript 編程中，隨著項目的復(fù)雜性增加，代碼的組織和管理變得至關(guān)重要。模塊化是一種強大的編程概念，它允許我們將代碼劃分為獨立的模塊，提高了可維護(hù)性和可擴(kuò)展性。本文將詳細(xì)介紹 CommonJS 和 ES6 模塊，幫助你理解它們的特點和用法。 1. CommonJS 模塊化 CommonJS 是
2024年02月13日
瀏覽(92)
【ES6】JavaScript 中的數(shù)組方法reduce
reduce() 是一個 JavaScript 中的數(shù)組方法，它會對數(shù)組的每個元素執(zhí)行一個提供的 reducer 函數(shù)，將其減少到一個單一的值。這是 reduce() 的基本用法：這里： callback 是一個用于每個數(shù)組元素的函數(shù)，接受四個參數(shù)： accumulator：累加器累加回調(diào)的返回值。它是上一次調(diào)用回調(diào)時返回
2024年02月10日
瀏覽(22)

<rt id="jbwla"></rt>

<label id="jbwla"><label id="jbwla"></label></label>