欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript面向对象编程--闭包

程序员文章站 2024-03-16 12:20:52
...

参考书籍:JavaScript设计模式

将类的静态变量通过闭包来实现
js

var Book = (function () {
    console.log('页面加载时执行');
    console.log('Book this指向window + bookNum: ' + bookNum);
    console.log(this);
    //静态私有属性
    var bookNum = 0;
    //静态私有方法
    function checkBook(name) {
        console.log('this is static private function');
    }
    //返回构造函数
    return function (newId, newName, newPrice) {
        console.log('方法触发时执行');
        console.log('constructor this指向构造函数  + bookNum: ' + bookNum);
        console.log(this);
        //私有属性
        var name, price;
        //私有方法
        function checkId() { };
        //特权方法
        this.getName = function () {
            return this.name;
        };
        this.getPrice = function () {
            return this.price;
        };
        this.setName = function () {
            this.name = newName;
        };
        this.setPrice = function () {
            this.price = newPrice;
        };
        //公有属性
        this.id = newId;
        //公有方法
        this.copy = function () {
            console.log('this is copy function');
        };
        bookNum++;
        if (bookNum > 100) {
            throw new Error('我们仅出版100本书');
        }
        //构造器
        this.setName(newName);
        this.setPrice(newPrice);
        console.log('end constructor this指向构造函数 + bookNum: ' + bookNum);
        console.log(this);
    }
})();
Book.prototype = {
    //静态公有属性
    isJSbook: false,
    //类静态公有方法
    display: function () {
        console.log('book display');
    }
}
function displayBook() {
    console.log('displayBook this指向window');
    console.log(this);
    var book = new Book(10, 'javascript', 50);
    document.getElementById("demo").innerHTML = book.getName();
    console.log('book.price: ' + book.price);
    console.log('book.bookNum: ' + book.bookNum);
}

console
Javascript面向对象编程--闭包
闭包是有权访问另一个函数作用域中变量的函数,即在一个函数内部创建另一个函数。我们将这个闭包作为创建对象的构造函数,这样它即使闭包又是可实例对象的函数,可访问到类函数作用域中的变量,如bookNum.
上面的例子在闭包外部添加原型属性和方法,看上去像似脱离了闭包这个类,所以有时候在闭包内部实现一个完整的类然后将其返回,如下:

var Book = (function () {
    console.log('页面加载时执行');
    console.log('Book this指向window + bookNum: ' + bookNum);
    console.log(this);
    //静态私有属性
    var bookNum = 0;
    //静态私有方法
    function checkBook(name) {
        console.log('this is static private function');
    }
    //创建类
    function _book(newId, newName, newPrice) {
        console.log('方法触发时执行');
        console.log('constructor this指向构造函数  + bookNum: ' + bookNum);
        console.log(this);
        //私有属性
        var name, price;
        //私有方法
        function checkId() { };
        //特权方法
        this.getName = function () {
            return this.name;
        };
        this.getPrice = function () {
            return this.price;
        };
        this.setName = function () {
            this.name = newName;
        };
        this.setPrice = function () {
            this.price = newPrice;
        };
        //公有属性
        this.id = newId;
        //公有方法
        this.copy = function () {
            console.log('this is copy function');
        };
        bookNum++;
        if (bookNum > 100) {
            throw new Error('我们仅出版100本书');
        }
        //构建原型
        this.setName(newName);
        this.setPrice(newPrice);
        console.log('end constructor this指向构造函数 + bookNum: ' + bookNum);
        console.log(this);
    }
    _book.prototype = {
        //静态公有属性
        isJSbook: false,
        //类静态公有方法
        display: function () {
            console.log('book display');
        }
    }
    //返回类
    return _book;

})();
function displayBook() {
    console.log('displayBook this指向window');
    console.log(this);
    var book = new Book(10, 'javascript', 50);
    document.getElementById("demo").innerHTML = book.getName();
    console.log('book.price: ' + book.price);
    console.log('book.bookNum: ' + book.bookNum);
}

console
Javascript面向对象编程--闭包
类的3个部分,第一部分是构造函数内的,这是供实例化对象复制用的,第二部分是构造函数外的,直接通过点语法添加的,这是供类使用的,实例化对象是访问不到的,第三部分是类原型中的,实例化对象可以通过其原型链间接的访问到,也是为供所有实例化对象所共用的