devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript ES6实现继承_es6继承

作者：weixin_40725706 | 2024-02-12 21:32:25

赞

踩

es6继承

1 对象的方法补充

2 原型继承关系图

3 class方式定义类

4 extends实现继承

5 extends实现继承

6 多态概念的理

function 创建的名称如果开头是大写的，那这个创建的不是函数，是创建了类。

 ES6-class类中的内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     var obj = {
  14.       running: function() {},
  15.       eating: () => {},
  16.       swimming() {
  17.  
  18.       }
  19.     }
  20.  
  21.     // function Person() {
  22.  
  23.     // }
  24.  
  25.     // Person.prototype.running = function() {
  26.  
  27.     // }
  28.  
  29.     // 编程: 高内聚低耦合
  30.     class Person {
  31.       // 1.类中的构造函数
  32.       // 当我们通过new关键字调用一个Person类时, 默认调用class中的constructor方法
  33.       constructor(name, age) {
  34.         this.name = name
  35.         this.age = age
  36.       }
  37.  
  38.       // 2.实例方法
  39.       // 本质上是放在Person.prototype
  40.       running() {
  41.         console.log(this.name + " running~")
  42.       }
  43.       eating() {
  44.         console.log(this.name + " eating~")
  45.       }
  46.     }
  47.  
  48.     // 创建实例对象
  49.     var p1 = new Person("why", 18)
  50.  
  51.     // 使用实例对象中属性和方法
  52.     console.log(p1.name, p1.age)
  53.     p1.running()
  54.     p1.eating()
  55.  
  56.     // 研究内容
  57.     console.log(Person.prototype === p1.__proto__)
  58.     console.log(Person.running) // 不能调用
  59.     console.log(Person.prototype.running) // 可以调用
  60.  
  61.   </script>
  62.  
  63. </body>
  64. </html>

ES6-class和function类的区别

可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处。类里面的方法又叫静态方法。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // function定义类
  14.     function Person1(name, age) {
  15.       this.name = name
  16.       this.age = age
  17.     }
  18.  
  19.     Person1.prototype.running = function() {}
  20.     Person1.prototype.eating = function() {}
  21.  
  22.     var p1 = new Person1("why", 18)
  23.     console.log(p1.__proto__ === Person1.prototype)
  24.     console.log(Person1.prototype.constructor)
  25.     console.log(typeof Person1) // function
  26.  
  27.     // 不同点: 作为普通函数去调用
  28.     Person1("abc", 100)
  29.  
  30.     // class定义类
  31.     class Person2 {
  32.       constructor(name, age) {
  33.         this.name = name
  34.         this.age = age
  35.       }
  36.  
  37.       running() {}
  38.       eating() {}
  39.     }
  40.  
  41.     var p2 = new Person2("kobe", 30)
  42.     console.log(p2.__proto__ === Person2.prototype)
  43.     console.log(Person2.prototype.constructor)
  44.     console.log(typeof Person2)
  45.  
  46.     // 不同点: class定义的类, 不能作为一个普通的函数进行调用
  47.     Person2("cba", 0)
  48.  
  49.   </script>
  50.  
  51. </body>
  52. </html>

ES6-对象访问器方法的编写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // 针对对象
  14.     // 方式一: 描述符
  15.     // var obj = {
  16.       // _name: "why"
  17.     // }
  18.     // Object.defineProperty(obj, "name", {
  19.     //   configurable: true,
  20.     //   enumerable: true,
  21.     //   set: function() {
  22.     //   },
  23.     //   get: function() {
  24.     //   }
  25.     // })
  26.  
  27.     // 方式二: 直接在对象定义访问器
  28.     // 监听_name什么时候被访问, 什么设置新的值
  29.     var obj = {
  30.       _name: "why",
  31.       // setter方法
  32.       set name(value) {
  33.         this._name = value
  34.       },
  35.       // getter方法
  36.       get name() {
  37.         return this._name
  38.       }
  39.     }
  40.  
  41.     obj.name = "kobe"
  42.     console.log(obj.name)
  43.  
  44.   </script>
  45.  
  46. </body>
  47. </html>

ES6-类的访问器方法的编写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // 1.访问器的编写方式
  14.     // class Person {
  15.     //   // 程序员之间的约定: 以_开头的属性和方法, 是不在外界访问
  16.     //   constructor(name, age) {
  17.     //     this._name = name
  18.     //   }
  19.  
  20.     //   set name(value) {
  21.     //     console.log("设置name")
  22.     //     this._name = value
  23.     //   }
  24.  
  25.     //   get name() {
  26.     //     console.log("获取name")
  27.     //     return this._name
  28.     //   }
  29.     // }
  30.  
  31.     // var p1 = new Person("why", 18)
  32.     // p1.name = "kobe"
  33.     // console.log(p1.name)
  34.     // // console.log(p1._name)
  35.  
  36.     // var p2 = new Person("james", 25)
  37.     // console.log(p2.name)
  38.  
  39.  
  40.     // 2.访问器的应用场景
  41.     class Rectangle {
  42.       constructor(x, y, width, height) {
  43.         this.x = x
  44.         this.y = y
  45.         this.width = width
  46.         this.height = height
  47.       }
  48.  
  49.       get position() {
  50.         return { x: this.x, y: this.y }
  51.       }
  52.  
  53.       get size() {
  54.         return { width: this.width, height: this.height }
  55.       }
  56.     }
  57.  
  58.     var rect1 = new Rectangle(10, 20, 100, 200)
  59.     console.log(rect1.position)
  60.     console.log(rect1.size)
  61.  
  62.   </script>
  63.  
  64. </body>
  65. </html>

ES6-类的静态方法的编写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.     // function Person() {}
  13.     // // 实例方法
  14.     // Person.prototype.running = function() {}
  15.     // // 类方法
  16.     // Person.randomPerson = function() {}
  17.  
  18.     // var p1 = new Person()
  19.     // p1.running()
  20.     // Person.randomPerson()
  21.  
  22.     // class定义的类
  23.     var names = ["abc", "cba", "nba", "mba"]
  24.     class Person {
  25.       constructor(name, age) {
  26.         this.name = name
  27.         this.age = age
  28.       }
  29.  
  30.       // 实例方法
  31.       running() {
  32.         console.log(this.name + " running~")
  33.       }
  34.       eating() {}
  35.  
  36.       // 类方法(静态方法)
  37.       static randomPerson() {
  38.         console.log(this)
  39.         var randomName = names[Math.floor(Math.random() * names.length)]
  40.         return new this(randomName, Math.floor(Math.random() * 100))
  41.       }
  42.     }
  43.  
  44.     var p1 = new Person()
  45.     p1.running()
  46.     p1.eating()
  47.     var randomPerson = Person.randomPerson()
  48.     console.log(randomPerson)
  49.  
  50.   </script>
  51.  
  52. </body>
  53. </html>

ES6-通过extends实现继承

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.     // 定义父类
  13.     class Person {
  14.       constructor(name, age) {
  15.         this.name = name
  16.         this.age = age
  17.       }
  18.  
  19.       running() {
  20.         console.log("running~")
  21.       }
  22.       eating() {
  23.         console.log("eating~")
  24.       }
  25.  
  26.     }
  27.  
  28.     class Student extends Person {
  29.       constructor(name, age, sno, score) {
  30.         // this.name = name
  31.         // this.age = age
  32.         super(name, age)
  33.         this.sno = sno
  34.         this.score = score
  35.       }
  36.  
  37.       // running() {
  38.       //   console.log("running~")
  39.       // }
  40.       // eating() {
  41.       //   console.log("eating~")
  42.       // }
  43.  
  44.       studying() {
  45.         console.log("studying~")
  46.       }
  47.     }
  48.  
  49.     var stu1 = new Student("why", 18, 111, 100)
  50.     stu1.running()
  51.     stu1.eating()
  52.     stu1.studying()
  53.  
  54.     
  55.     class Teacher extends Person {
  56.       constructor(name, age, title) {
  57.         // this.name = name
  58.         // this.age = age
  59.         super(name, age)
  60.         this.title = title
  61.       }
  62.  
  63.       // running() {
  64.       //   console.log("running~")
  65.       // }
  66.       // eating() {
  67.       //   console.log("eating~")
  68.       // }
  69.  
  70.       teaching() {
  71.         console.log("teaching~")
  72.       }
  73.     }
  74.  
  75.  
  76.   </script>
  77.  
  78. </body>
  79. </html>

ES6-super关键字的其他用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     class Animal {
  14.       running() {
  15.         console.log("running")
  16.       }
  17.       eating() {
  18.         console.log("eating")
  19.       }
  20.  
  21.       static sleep() {
  22.         console.log("static animal sleep")
  23.       }
  24.     }
  25.  
  26.     class Dog extends Animal {
  27.       // 子类如果对于父类的方法实现不满足(继承过来的方法)
  28.       // 重新实现称之为重写(父类方法的重写)
  29.       running() {
  30.         console.log("dog四条腿")
  31.         // 调用父类的方法
  32.         super.running()
  33.         // console.log("running~")
  34.         // console.log("dog四条腿running~")
  35.       }
  36.  
  37.       static sleep() {
  38.         console.log("趴着")
  39.         super.sleep()
  40.       }
  41.     }
  42.  
  43.     var dog = new Dog()
  44.     dog.running()
  45.     dog.eating()
  46.  
  47.     Dog.sleep()
  48.  
  49.   </script>
  50.  
  51. </body>
  52. </html>

继承自内置类的用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // 1.创建一个新的类, 继承自Array进行扩展
  14.     class HYArray extends Array {
  15.       get lastItem() {
  16.         return this[this.length - 1]
  17.       }
  18.  
  19.       get firstItem() {
  20.         return this[0]
  21.       }
  22.     }
  23.  
  24.     var arr = new HYArray(10, 20, 30)
  25.     console.log(arr)
  26.     console.log(arr.length)
  27.     console.log(arr[0])
  28.     console.log(arr.lastItem)
  29.     console.log(arr.firstItem)
  30.  
  31.     // 2.直接对Array进行扩展
  32.     Array.prototype.lastItem = function() {
  33.       return this[this.length - 1]
  34.     }
  35.  
  36.     var arr = new Array(10, 20, 30)
  37.     console.log(arr.__proto__ === Array.prototype)
  38.     console.log(arr.lastItem())
  39.  
  40.     // 函数apply/call/bind方法 -> Function.prototype
  41.  
  42.   </script>
  43.  
  44. </body>
  45. </html>

ES6-类的混入mixin的用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // JavaScript只支持单继承(不支持多继承)
  14.     function mixinAnimal(BaseClass) {
  15.       return class extends BaseClass {
  16.         running() {
  17.           console.log("running~")
  18.         }
  19.       }
  20.     }
  21.  
  22.     function mixinRunner(BaseClass) {
  23.       return class extends BaseClass {
  24.         flying() {
  25.           console.log("flying~")
  26.         }
  27.       }
  28.     }
  29.  
  30.     class Bird {
  31.       eating() {
  32.         console.log("eating~")
  33.       }
  34.     }
  35.  
  36.     // var NewBird = mixinRunner(mixinAnimal(Bird))
  37.     class NewBird extends mixinRunner(mixinAnimal(Bird)) {
  38.     }
  39.     var bird = new NewBird()
  40.     bird.flying()
  41.     bird.running()
  42.     bird.eating()
  43.  
  44.   </script>
  45.  
  46. </body>
  47. </html>

ES6-ES6中的class转ES5代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.     // class Person {
  13.     //   constructor(name, age) {
  14.     //     this.name = name
  15.     //     this.age = age
  16.     //   }
  17.  
  18.     //   running() {}
  19.     //   eating() {}
  20.  
  21.     //   static randomPerson() {}
  22.     // }
  23.  
  24.     // var p1 = new Person()
  25.   </script>
  26.   <script src="./js/es5_code01.js"></script>
  27.  
  28. </body>
  29. </html>

可以去babel官网打开try out，然后改default。

ES6-Java面向对象的多态理解

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // 继承是多态的前提
  14.     // shape形状
  15.     class Shape {
  16.       getArea() {}
  17.     }
  18.  
  19.     class Rectangle extends Shape {
  20.       constructor(width, height) {
  21.         super()
  22.         this.width = width
  23.         this.height = height
  24.       }
  25.  
  26.       getArea() {
  27.         return this.width * this.height
  28.       }
  29.     }
  30.  
  31.     class Circle extends Shape {
  32.       constructor(radius) {
  33.         super()
  34.         this.radius = radius
  35.       }
  36.  
  37.       getArea() {
  38.         return this.radius * this.radius * 3.14
  39.       }
  40.     }
  41.  
  42.     var rect1 = new Rectangle(100, 200)
  43.     var rect2 = new Rectangle(20, 30)
  44.     var c1 = new Circle(10)
  45.     var c2 = new Circle(15)
  46.  
  47.     // 表现形式就是多态
  48.     /*
  49.       在严格意义的面向对象语言中, 多态的是存在如下条件的:
  50.         1.必须有继承(实现接口)
  51.         2.必须有父类引用指向子类对象
  52.     */
  53.     function getShapeArea(shape) {
  54.       console.log(shape.getArea())
  55.     }
  56.  
  57.     getShapeArea(rect1)
  58.     getShapeArea(c1)
  59.  
  60.     
  61.     var obj = {
  62.       getArea: function() {
  63.         return 10000
  64.       }
  65.     }
  66.  
  67.     getShapeArea(obj)
  68.     getShapeArea(123)
  69.  
  70.   </script>
  71.  
  72. </body>
  73. </html>

ES6-JS面向对象的多态理解

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // 多态的表现: JS到处都是多态
  14.     function sum(a1, a2) {
  15.       return a1 + a2
  16.     }
  17.  
  18.     sum(20, 30)
  19.     sum("abc", "cba")
  20.     
  21.     // 多态的表现
  22.     var foo = 123
  23.     foo = "Hello World"
  24.     console.log(foo.split())
  25.     foo = {
  26.       running: function() {}
  27.     }
  28.     foo.running()
  29.     foo = []
  30.     console.log(foo.length)
  31.  
  32.   </script>
  33.  
  34. </body>
  35. </html>

ES6-对象字面量的增强写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     /*
  14.       1.属性的增强
  15.       2.方法的增强
  16.       3.计算属性名的写法
  17.     */
  18.  
  19.     var name = "why"
  20.     var age = 18
  21.  
  22.     var key = "address" + " city"
  23.  
  24.     var obj = {
  25.       // 1.属性的增强
  26.       name,
  27.       age,
  28.  
  29.       // 2.方法的增强
  30.       running: function() {
  31.         console.log(this)
  32.       },
  33.       swimming() {
  34.         console.log(this)
  35.       },
  36.       eating: () => {
  37.         console.log(this)
  38.       },
  39.  
  40.       // 3.计算属性名
  41.       [key]: "广州"
  42.     }
  43.  
  44.     obj.running()
  45.     obj.swimming()
  46.     obj.eating()
  47.  
  48.     function foo() {
  49.       var message = "Hello World"
  50.       var info = "my name is why"
  51.  
  52.       return { message, info }
  53.     }
  54.  
  55.     var result = foo()
  56.     console.log(result.message, result.info)
  57.  
  58.   </script>
  59.  
  60. </body>
  61. </html>

ES6-数组和对象的解构语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     var names = ["abc", "cba", undefined, "nba", "mba"]
  14.  
  15.  
  16.     // 1.数组的解构
  17.     // var name1 = names[0]
  18.     // var name2 = names[1]
  19.     // var name3 = names[2]
  20.     // 1.1. 基本使用
  21.     // var [name1, name2, name3] = names
  22.     // console.log(name1, name2, name3)
  23.  
  24.     // 1.2. 顺序问题: 严格的顺序
  25.     // var [name1, , name3] = names
  26.     // console.log(name1, name3)
  27.  
  28.     // 1.3. 解构出数组
  29.     // var [name1, name2, ...newNames] = names
  30.     // console.log(name1, name2, newNames)
  31.  
  32.     // 1.4. 解构的默认值
  33.     var [name1, name2, name3 = "default"] = names
  34.     console.log(name1, name2, name3)
  35.  
  36.  
  37.     // 2.对象的解构
  38.     var obj = { name: "why", age: 18, height: 1.88 }
  39.     // var name = obj.name
  40.     // var age = obj.age
  41.     // var height = obj.height
  42.     // 2.1. 基本使用
  43.     // var { name, age, height } = obj
  44.     // console.log(name, age, height)
  45.  
  46.     // 2.2. 顺序问题: 对象的解构是没有顺序, 根据key解构
  47.     // var { height, name, age } = obj
  48.     // console.log(name, age, height)
  49.  
  50.  
  51.     // 2.3. 对变量进行重命名
  52.     // var { height: wHeight, name: wName, age: wAge } = obj
  53.     // console.log(wName, wAge, wHeight)
  54.  
  55.     // 2.4. 默认值
  56.     var { 
  57.       height: wHeight, 
  58.       name: wName, 
  59.       age: wAge, 
  60.       address: wAddress = "中国"
  61.     } = obj
  62.     console.log(wName, wAge, wHeight, wAddress)
  63.  
  64.     // 2.5. 对象的剩余内容
  65.     var {
  66.       name,
  67.       age,
  68.       ...newObj
  69.     } = obj
  70.     console.log(newObj)
  71.  
  72.  
  73.     // 应用: 在函数中(其他类似的地方)
  74.     //  function getPosition(position)直接把position解构成{ x, y }，方便拿对象里面的参数
  75.     function getPosition({ x, y }) {
  76.       console.log(x, y)
  77.     }
  78.  
  79.     getPosition({ x: 10, y: 20 })
  80.     getPosition({ x: 25, y: 35 })
  81.  
  82.     function foo(num) {}
  83.  
  84.     foo(123)
  85.  
  86.   </script>
  87.  
  88. </body>
  89. </html>

补充-手写apply-call函数实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // new Function()
  14.     // foo.__proto__ === Function.prototype
  15.     function foo(name, age) {
  16.       console.log(this, name, age)
  17.     }
  18.  
  19.     // foo函数可以通过apply/call
  20.     // foo.apply("aaa", ["why", 18])
  21.     // foo.call("bbb", "kobe", 30)
  22.  
  23.     // 1.给函数对象添加方法: hyapply
  24.     Function.prototype.hyapply = function(thisArg, otherArgs) {
  25.       // this -> 调用的函数对象
  26.       // thisArg -> 传入的第一个参数, 要绑定的this
  27.       // console.log(this) // -> 当前调用的函数对象
  28.       // this.apply(thisArg)
  29.  
  30.       thisArg.fn = this
  31.  
  32.       // 1.获取thisArg, 并且确保是一个对象类型
  33.       thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)
  34.  
  35.       // thisArg.fn = this
  36.       Object.defineProperty(thisArg, "fn", {
  37.         enumerable: false,
  38.         configurable: true,
  39.         value: this
  40.       })
  41.       thisArg.fn(...otherArgs)
  42.  
  43.       delete thisArg.fn
  44.     }
  45.  
  46.     // foo.hyapply({ name: "why" }, ["james", 25])
  47.     // foo.hyapply(123, ["why", 18])
  48.     // foo.hyapply(null, ["kobe", 30])
  49.  
  50.  
  51.     // 2.给函数对象添加方法: hycall
  52.     Function.prototype.hycall = function(thisArg, ...otherArgs) {
  53.       // 1.获取thisArg, 并且确保是一个对象类型
  54.       thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)
  55.  
  56.       // thisArg.fn = this
  57.       Object.defineProperty(thisArg, "fn", {
  58.         enumerable: false,
  59.         configurable: true,
  60.         value: this
  61.       })
  62.       thisArg.fn(...otherArgs)
  63.  
  64.       delete thisArg.fn
  65.     }
  66.     
  67.     foo.hycall({ name: "why", fn: "abc" }, "james", 25)
  68.     foo.hycall(123, "why", 18)
  69.     foo.hycall(null, "kobe", 30)
  70.  
  71.  
  72.   </script>
  73.  
  74. </body>
  75. </html>

补充-手写apply-call抽取封装

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // new Function()
  14.     // foo.__proto__ === Function.prototype
  15.     function foo(name, age) {
  16.       console.log(this, name, age)
  17.     }
  18.  
  19.     // foo函数可以通过apply/call
  20.     // foo.apply("aaa", ["why", 18])
  21.     // foo.call("bbb", "kobe", 30)
  22.  
  23.     // 1.封装思想
  24.     // 1.1.封装到独立的函数中
  25.     function execFn(thisArg, otherArgs, fn) {
  26.       // 1.获取thisArg, 并且确保是一个对象类型
  27.       thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)
  28.  
  29.       // thisArg.fn = this
  30.       Object.defineProperty(thisArg, "fn", {
  31.         enumerable: false,
  32.         configurable: true,
  33.         value: fn
  34.       })
  35.  
  36.       // 执行代码
  37.       thisArg.fn(...otherArgs)
  38.  
  39.       delete thisArg.fn
  40.     }
  41.  
  42.     // 1.2. 封装原型中
  43.     Function.prototype.hyexec = function(thisArg, otherArgs) {
  44.       // 1.获取thisArg, 并且确保是一个对象类型
  45.       thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)
  46.  
  47.       // thisArg.fn = this
  48.       Object.defineProperty(thisArg, "fn", {
  49.         enumerable: false,
  50.         configurable: true,
  51.         value: this
  52.       })
  53.       thisArg.fn(...otherArgs)
  54.  
  55.       delete thisArg.fn
  56.     }
  57.  
  58.  
  59.     // 1.给函数对象添加方法: hyapply
  60.     Function.prototype.hyapply = function(thisArg, otherArgs) {
  61.       this.hyexec(thisArg, otherArgs)
  62.     }
  63.     // 2.给函数对象添加方法: hycall
  64.     Function.prototype.hycall = function(thisArg, ...otherArgs) {
  65.       this.hyexec(thisArg, otherArgs)
  66.     }
  67.  
  68.     foo.hyapply({ name: "why" }, ["james", 25])
  69.     foo.hyapply(123, ["why", 18])
  70.     foo.hyapply(null, ["kobe", 30])
  71.     
  72.     foo.hycall({ name: "why" }, "james", 25)
  73.     foo.hycall(123, "why", 18)
  74.     foo.hycall(null, "kobe", 30)
  75.  
  76.  
  77.   </script>
  78.  
  79. </body>
  80. </html>

补充-手写bind函数的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   
  11.   <script>
  12.  
  13.     // apply/call
  14.     function foo(name, age, height, address) {
  15.       console.log(this, name, age, height, address)
  16.     }
  17.  
  18.     // Function.prototype
  19.     // var newFoo = foo.bind({ name: "why" }, "why", 18)
  20.     // newFoo(1.88)
  21.  
  22.     // 实现hybind函数
  23.     Function.prototype.hybind = function(thisArg, ...otherArgs) {
  24.       // console.log(this) // -> foo函数对象
  25.       thisArg = thisArg === null || thisArg === undefined ? window: Object(thisArg)
  26.       Object.defineProperty(thisArg, "fn", {
  27.         enumerable: false,
  28.         configurable: true,
  29.         writable: false,
  30.         value: this
  31.       })
  32.  
  33.       return (...newArgs) => {
  34.         // var allArgs = otherArgs.concat(newArgs)
  35.         var allArgs = [...otherArgs, ...newArgs]
  36.         thisArg.fn(...allArgs)
  37.       }
  38.     }
  39.  
  40.     var newFoo = foo.hybind("abc", "kobe", 30)
  41.     newFoo(1.88, "广州市")
  42.     newFoo(1.88, "广州市")
  43.     newFoo(1.88, "广州市")
  44.     newFoo(1.88, "广州市")
  45.  
  46.   </script>
  47.  
  48. </body>
  49. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/78731
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号