JavaScript面向对象之-----封装_封装把js封装成库让第三方调用-优快云博客

本文链接：https://blog.youkuaiyun.com/pangchengyong0724/article/details/53284839
本文介绍了JavaScript面向对象编程的基础概念，包括如何创建类、定义私有和共有属性与方法，以及如何利用构造器初始化对象。文章还探讨了原型链的工作原理，并解释了通过this和prototype添加属性的区别。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>
<script type="text/javascript" charset="utf-8" async defer>
    /**
     * JavaScript面向对象 -------封装
     */
    // 创建一个类
    /*
    在js中类名称一般首字母要大写  然后在内部通过对this（函数内部自带的一个变量，用于指向当前对象）变量添加属性或者方法来实现对类添加属性或者方法
     */
    var Book = function(id,bookname,price){
        this.id = id;
        this.bookname = bookname;
        this.price = price;
    }
    /*
    也可以通过在类的原型（类也是一个对象，所以也有原型prototype）上添加属性和方法
    有两种方式：【但是两种不能混合使用】
    一：一一为原型对象属性赋值
    二：将一个对象赋值给类的原型对象
     */
    Book.prototype.dispaly = function(){
        // 显示这本书
        console.log('书的名字：'+this.bookname);
    };
    // 或者
    /*Book.prototype={
        dispaly:function(){}
    }*/


    // 这样我们就将所需要的方法和属性都封装在我们抽象的Book类里面了。
    // 使用这些方法的时候我们不能直接使用Book这个类，我们需要通过new关键字来实例化Book这个对象。  
    // 使用对象的属性和方法时可以使用.语法
    var book = new Book(10,'javascript',5000);
    console.debug(book.bookname);
    book.dispaly();// 调用原型链上的display方法

    // 问题：通过this添加的属性和方法与同prototype添加的属性和方法有什么区别呢？
    // 通过this添加的属性和方法是在当前对象上添加的，而js是一种基于原型prototype的语言，所以每创建一个新对象时（在js中函数也是一种对象），它都有一个原型prototype用于指向其继承的属性、方法。通过prototype继承的方法并不是对象自身的，所以在使用这些方法的时候，需要通过prototype一级一级的查找来得到。这样你会发现通过this定义的属性和方法是该对象自身所拥有的。所以我们每次通过new一个类创建一个新对象时，this指向的属性和方法都会得到相应的创建，而通过prototype继承的属性或者方法是每个对象通过prototype才可以访问到。所以我们每次通过类创建一个新对象的时候，这些属性和方法不会再次被创建。

    // prototype中的construct属性又是指什么呀？
    // construct是一个属性，当创建一个函数或对象的时候都会为其创建一个原型对象prototype，在prototype中又会像函数中创建this一样创建一个construct属性，那么constructor属性指向的就是拥有整个原型对象的函数或对象



    // 属性与方法的暴露于隐藏在JavaScript中是如何实现的呢？
    /*

    // 私有的属性和方法
    由于JavaScript的函数级作用域，声明在函数内部的变量以及方法在函数外部是访问不到的，因此通过此特性就可以在类中创建私有函数以及私有变量。

    // 共有的属性和方法 
    在函数内部通过this创建的属性和方法，在类创建对象时，每个对象自身都拥有一份并且可以在外部访问到。因此通过this创建的属性和方法可以看做是对象的共有属性和共有方法

    // 特权方法
    通过this创建的方法，不但可以访问这些对象的共有属性和方法而且还可以访问到类或自身的私有属性和方法，由于这些方法的权利比较大，所以我们又将其称之为特权方法。

    // 构造器
    在对象创建时通过使用这些特权方法我们可以初始化实例对象的一些属性，因此这些在创建对象时调用的特权方法还可以看做是类的构造器

     */

    // 定义一个类
    var Book = function(id,name,price){
        // 定义本对象私有变量
        var num = 1;
        // 定义本对象私有方法
        var checkId = function(){

        };

        // 定义本对象共有属性
        this.id = id;
        // 定义本对象共有方法
        this.copy = function(){};

        // 定义本对象特权方法
        this.getName = function(){};
        this.setName = function(){};
        this.getPrice = function(){};
        this.setPrice = function(){};

        // 定义本对象构造器
        this.setName(name);
        this.setPrice(price);
    }

    /*
    私有方法和属性的定义：原理是通过js函数级作用域的特征实现的，在函数内部通过var定义

    通过new 关键字实例化对象的时候，由于对类执行了一次，所以类内部this上定义的属性和方法自然就可以直接复制到新创建的对象上，称为对象的共有属性和拥有方法

    通过this定义的方法，可以访问到类内的私有属性和方法，由于其权利比较大，因此称之为特权方法

    我们在通过new关键字实例化一个对象时，可以通过调用特权方法来初始化对象的一些属性，一般调用特权方法的方法我们又称之为构造器
     */

    // 在类的外部通过点语法定义的属性和方法与在类的外部通过prototype定义的属性和方法有什么作用呢？
    // 通过new关键字创建新对象时，由于类外通过点语法添加的属性和方法没有执行到，所以在新创建的对象中无法获取他们，但是可以通过类来使用，因此在类外面通过点语法定义的属性和方法被称为静态属性和方法。

    // 类通过prototype创建的属性或者方法在类实的实力对象中是可以通过this访问到的，所以我们将prototype对象中的属性和方法称为共有的属性和方法

    // 类的静态共有属性【对象实力是访问不到的只能通过类名称访问】
    Book.isChinese = true;
    // 类的静态共有方法【对象实力是访问不到的只能通过类名称访问】
    Book.resetTime = function(){
        console.log('new Time');
    };
    // 【可以通过对象实力访问】
    Book.prototype = {
        // 公有属性
        isJsBook:false,
        // 公有方法
        display:function(){

        }
    };


    /*
    使用：
    通过new关键字创建的对象实质上是对新对象this的不断赋值，并将prototype指向类的prototype所指向的对象，而类的构造函数外面通过点语法定义的属性方法是不会添加到新创建的对象上去的。因此要想在新创建的对象中使用isChinese 就得通过Book类使用而不能通过this，如Book.isChinese,而类的原型prototype上定义的属性在新对象里就可以直接使用，这是因为新对象的prototype和类的prototype指向的是同一个对象
     */

    var b = new Book(11,'javascript',110);
    console.log(b.num); //undefined
    console.info(b.isJsBook);//false
    console.info(b.id); // 11
    console.info(b.isChinese);//undefined
    console.info(Book.isChinese); //true
    Book.resetTime();//new Time
</script>