2 面向对象 – 前端设计模式系列教程

搭建开发环境

webpack-dev-server 配置
babel 安装和配置

1 定义

面向:oriented(朝向) Object Oriented(OO)
面向过程就是oriented progress
过程和函数的区别就是过程没有返回值
类就像是一个模板,我们可以通过这个模板定义很多有共性的对象
一个类包含属性(名词)、构造函数、方法(动词)
new一个类得到一个实例,这个实例就是一个对象

2 面向对象三要素

1 继承
子类继承父类 Class Student extends People。
优点:把公共的方法抽离出来,提高复用,减少冗余
父类 – 人(名字,年龄,吃饭)
子类 – 学生(学号,学习)

class Person{
    constructor (name,age){
        this.name=name
        this.age=age
    }
    getName(){
        return this.name
    }
    getAge(){
        return this.age
    }
}
class Student extends Person{
    constructor (name,age,number){
        super(name,age)
        this.number=number
    }
    getNumber(){
        return this.number
    }
}
let p = new Person('安安')
let xm= new Student('小明',18,20)
console.log(p.getName())
console.log(xm.getName())
console.log(xm.getAge())
console.log(xm.getNumber())

 

2 封装
数据的权限和保密,封装的三个关键词public(完全开放)、protected(对子类开放)、private(对自己开放)。TS可以实现三种属性类型。
优点:减少耦合,不该外露的不外露,利于数据、接口的权限管理。
下面使用ts的语法举例:

class People{ 
    name 
    age // 默认public 
    protected weight // 只对子类开放 
} 

class Student extends People{ 
    number 
    private girlfriend // 只有类的内部可以访问 
    constructor(name, age, number){ 
        super(name, age) 
        this.number = number 
        this.girlfreind = ‘xiaoli' 
    } 
} 

let xiaoming = new Student(‘xiaoming’,10,’A1’) 
xiaoming.weight //可以访问 
xiaoming.girfriend //报错

 

3 多态
同一接口不同实现
例如父类有个公共的sayName方法,2个子类可以同时调用这个公共方法,来实现不同的操作。比如打印出各自的姓名。
代码举例:

class Person {
    constructor(name){
        this.name = name
    }
    sayName(){
        console.log('I am Person')
    }
}
class A extends Person{
    constructor(name){
        super(name)
    }
    sayName(){
        console.log('I am A')
    }
}
class B extends Person{
    constructor(name){
        super(name)
    }
    sayName(){
        console.log('I am B')
    }
}
let a = new A()
let b = new B()
a.sayName() 
b.sayName()

 

优点:保持子类的开放性和灵活性,面向接口编程(去学JAVA)。

3 面向对象的应用案例

实现一个jquery的选择器

class jQuery{
    constructor(seletor){
        let slice =Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(seletor))
        let len = dom?dom.length:0
        for(let i = 0; i < len; i++){
            this[i] = dom[i]
            this.length = len
            this.seletor = seletor || ''
        }
    }
    append(node){

    }
    addClass(name){

    }
    html(data){

    }
}

export default  function (selector){
    return new jQuery(selector)
}

 

4 面向对象的意义

程序执行遵循顺序、判断、循环、goto(被淘汰) ——结构化
面向对象的意义就是数据结构化
对于计算机来说结构化的才是最简单的,比如DOM树
编程应该是简单和抽象

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:253 次浏览