MarginLon MarginLon
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

MarginLon

http://info.cern.ch
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 数据类型 类型检测 类型转换
  • 精度问题
  • 堆栈内存 函数底层运行机制 块级作用域
  • GC机制 闭包作用域 let/const/var
  • 闭包应用
  • DOM
  • BOM
  • This指向
  • 浏览器渲染机制 CRP优化 事件循环机制
  • 函数防抖节流
  • 模块化 柯里化
  • 构造函数 原型
  • CLASS
    • 1.CLASS
    • 2.类的继承
  • 工厂设计模式 深浅拷贝 深浅合并
  • Iterator/Generator
  • Promise/ Async/ Await
  • HTTP/跨域
  • API
  • AJAX
  • 事件
  • 《JavaScript高级程序设计(第4版)》
MarginLon
2022-04-16
目录

CLASS

  • 1.CLASS
  • 2.类的继承

# 1.CLASS

//ES6
class Modal {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        // this.n = 100;
    } 
    // 给实例的私有属性和方法
    n = 100;

    // 原型上公共方法(公共属性无法直接设置,方法不能使用箭头函数)
    // 增加的方法没有prototype,不可枚举
    getX() { console.log(this.x);}
    getY() { console.log(this.y);}

    //当作普通对象设置“静态”属性和方法
    static n = 200;
    static setNumber(n) {this.n=n;}
}
//原型上的公共属性提取到外面单独写
Modal.prototype.z = 10;
let m = new Modal(10, 20);

//ES5
function Modal(x,y){
    this.x=x;
    this.y=y;
}

Modal.prototype.z=10;
Modal.prototype.getX=function(){
    console.log(this.x);
}
Modal.prototype.getY=function(){
    console.log(this.y);
}
// Model->普通对象: 私有属性和方法与实例无关
Modal.n=200;
Modal.setNumber=function(n){
    this.n=n;
};
let m = new Model(10,20);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 2.类的继承

  • 封装:低耦合、高内聚

  • 多态: 重载[方法名相同,参数类型或个数不同 => 多个方法] & 重写[子类重写父类中的方法]

  • 继承: 子类继承父类 [JS:子类的实例既有子类赋予的私有/共有属性和方法,也想拥有父类的私有/公有属性方法]

    1. 原型继承
    //基于原型链__proto__
    // + 父要赋予其实例的私有属性,子实例会变为公有属性
    // + 子实例可以修改父的方法,影响父实例。
    Child.prototype = new Parent;
    Child.prototype.get = function get(){};
    
    1
    2
    3
    4
    5
    1. call继承
    // 父类普通方法执行{原型失效},让方法中的this是子类的实例,让父类的私有赋予子类实例的私有
    function Child(){
      Parent.call(this);
    }
    Child.prototype = new Parent;
    
    1
    2
    3
    4
    5
    1. 寄生组合式继承
    function Child(){
     Parent.call(this);
    }
    
    Child.prototype = Object.create(Parent.prototype);
    
    1
    2
    3
    4
    5
    1. ES6 extends继承
    class Parent {
      constructor(){
        this.x =100;
      }
      getX(){}
    }
    class Child extends Parent {
      constructor(){
        super();
        this.y = 200;
      }
      getY(){}
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
编辑 (opens new window)
上次更新: 2023/04/01, 15:26:22
构造函数 原型
工厂设计模式 深浅拷贝 深浅合并

← 构造函数 原型 工厂设计模式 深浅拷贝 深浅合并→

最近更新
01
KnockoutJS
11-12
02
综述
10-17
03
前言
10-12
更多文章>
Theme by Vdoing | Copyright © 2019-2024 MarginLon | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式