JavaScript闭包应用之封装

最新推荐文章于 2025-11-01 01:14:35 发布

原创最新推荐文章于 2025-11-01 01:14:35 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

29 篇文章

订阅专栏

本文通过实例详细解析了JavaScript中的闭包概念，并展示了如何利用闭包实现类似面向对象编程语言中的私有成员功能。

闭包，“网友调侃为封闭的包包”，我对它的理解是“父函数中定义的变量，虽然父函数的执行已经完成，但是子函数仍然有访问它的权利”。

function Demo() {
            var name = "";
            this.getName = function() {
                return name;
            }

            this.setName = function(value) {
                name = value;
            };
        }

        var obj = new Demo();
        console.log(obj.name);
        console.log(obj.getName());

可以见得，通过obj.name是访问不到name属性的。我们只有通过getName方法才能够访问到。这样就实现了传统面向对象编程语言的private的效果。

但是我们可以对其进一步重构。

function Demo() {


            var name = "";


            // this.getName = function() {
            //     return name;
            // }

            // this.setName = function(value) {
            //     name = value;
            // };
        }




        Demo.prototype = {
            getName: function() {
                return name;
            },
            setName: function(value) {
                name = value;
            }
        }

        var obj = new Demo();
        console.log(obj.name);
        console.log(obj.getName());

效果和原来一样，但是这样设计相对更好。

再进一步改造。

 function Demo() {


            var name = "";


            // this.getName = function() {
            //     return name;
            // }

            // this.setName = function(value) {
            //     name = value;
            // };
        }



        Demo.prototype = {
            getName: function() {
                return name;
            },
            setName: function(value) {
                name = value;
                return this;
            }
        }

        var obj = new Demo();
      //  console.log(obj.name);
        console.log(obj.setName("yangxu").getName());

这样，让原本返回void的函数返回this，我们的函数可以支持级联调用。这样的构造函数就显得比较完美了。