美文网首页javascript设计模式笔记
JavaScript进阶:将功能需求抽离对象化

JavaScript进阶:将功能需求抽离对象化

作者: 听书先生 | 来源:发表于2022-01-04 23:29 被阅读0次

    在开发的应用中,需要将一个需求抽象成为一个对象,然后针对这个对象的属性以及方法进行分析。这样处理一方面提升了代码的灵活性,同时,也保障了项目的安全与稳定性。

    当我们把所需要的属性和方法封装在我们抽象的一个实体类中,比如:Person类,接着我们使用功能的方法与属性时,不能直接使用Person类,需要使用new关键字来实例化创建一个新的对象,使用实例化对象的属性和方法,可以通过点运算符。

    1、this添加的属性和方法与prototype添加的属性和方法的区别

    this添加的属性和方法是在当前对象上添加的,而javascript语言是基于prototype的核心来操作的,每创建一个对象时,它都有一个原型prototype用于指向其继承的属性、方法。这样通过prototype继承的方法并不是对象自身的,因此,在使用这些方法和属性的时候,就需要使用prototype一层一层的去寻找。所以,最本质的区别就是this定义的属性和方法是该对象自身拥有的,所以可以通过类创建对象,使用this.指向的属性和方法都会得到相应的值。而通过prototype继承的属性和方法是需要每个对象通过prototype才能访问到的。以及每次通过类创建新对象时,这些属性和方法不会再次被创建。

    2、constuctor

    constructor是一个属性,当创建一个函数或者对象时都会为其创建一个原型对象prototype,在prototype对象中又会为其创建constructor属性,constructor属性指向的就是拥有整个原型对象的函数或者对象。

    image

    3、函数级作用域

    由于js的函数级作用域,声明在函数内部的变量和方法在外界是无法访问到的,也就是说通过这种特性,可以抽离出创建类的私有变量和私有方法。在函数内部使用this创建的属性和方法,在类创建对象时,每个对象都拥有一份并且可以在外部访问到,也就是说,通过this创建的属性和方法可以看作对象共有属性和对象共有的方法,而且this创建的属性和方法,不仅能访问到对象的共有属性和方法,还能访问到类以及对象自身的私有属性和私有方法。因此,通过this创建的方法也叫做特权方法

    var Person = function(weight, height) {
        // 对象公有属性
        this.weight = weight;
        this.height = height;
        
        // 私有属性
        var name = 'zhangsan';
        // 私有方法
        function getName() {
            console.log('调用了getName方法')
        };
        
        // 特权方法
        this.getAge = function() {
            console.log('调用了getAge方法')
        };
        this.getSex = function() {
            console.log('调用了getSex方法')
        };
    }
    
    4、类的静态公有属性和方法

    通过new关键字创建新的对象时,由于类外面通过点运算符添加的属性和方法没有执行到,所以新创建的对象中无法获取他们,但是可以通过类来使用,因此类外面通过点运算符定义的属性和方法也叫类的静态共有属性和方法,而类通过prototype创建的属性和方法在类实例的对象中是可以通过this访问到的,因此将prototype对象中的属性和方法称为共有属性和方法。

    // 类静态公有属性(对象不能访问)
    Book.BOOK_AHTHOR = '陈某某';
    // 类静态公有方法(对象不能访问)
    Book.getBookPrice = function() {
        console.log('调用了获取价格的方法...')
    }
    // 在原型对象上添加对象和类的公有属性和方法
    Book.prototype = {
        // 公有属性
        BOOK_NAME: 'JavaScript高级程序设计',
        // 公有方法
        getBookInfo: function() {
            console.log('调取了书本信息的方法...')
        }
    }
    
    const book = new Book();
    
    // 尝试访问对象和类的公有属性和方法
    console.log(book.BOOK_NAME);
    book.getBookInfo();
    
    // 尝试访问类静态公有属性和方法
    console.log(book.BOOK_AHTHOR);  // undefined
    book.getBookPrice(); // getBookPrice is not function
    
    
    console.log(Book.BOOK_AHTHOR);
    Book.getBookPrice();
    
    5、new的本质

    通过new关键字创建的对象,本质上就是对新创建的对象this的不断赋值,并将prototype指向类的prototype所指向的对象,类的构造函数外面使用类通过点运算是不会添加到新创建的对象上去的,因此,外面的只能通过类.去访问。也就是上面的Book.BOOK_AHTHOR才能访问到。

    相关文章

      网友评论

        本文标题:JavaScript进阶:将功能需求抽离对象化

        本文链接:https://www.haomeiwen.com/subject/asaccrtx.html