js封装函数

1.封装(encapsulation)函数(function)

函数对任何语言来说都是一个核心的概念。通过函数可以 封装任意多条语句,而且可以在任何地方、任何时候调用执行。

封装方法: 将语句写进函数的括号内,成为函数体,然后就可以调用了。

缺点:

  • 容易被同名变量覆盖--因为在全局作用域下声明的变量,容易被同名变量覆盖
  • 会立即执行--解析器读取到此处立即执行

优点:

  • 避免了全局变量--因为存在函数作用域
  • 按需执行--解析器读取到此处,函数并未执行,只有当你需要的时候,调用此函数即可
  • 提高代码重用性

注意:

  • 函数存在局部作用域
  • 函数存在函数提升--因此,函数可以在声明之前调用
  • 函数内可以访问作用域链

2.代码演示

未封装代码:

var body = document.getElementsByTagName("body")[0];
        var h1 = document.createElement("h1");
        body.style.backgroundColor = "blue;
        h1.innerText = "1";
        body.appendChild(h1);

封装代码:

//实现类,内部通过this指向当前对象,通过this添加属性或者方法
        var Book = function (id, name, price) {

            //私有属性
            var name = '',
                price = 0;

            //私有方法
            function checkId() {
            }

            //对象共有属性
            this.id = id;

            //可操作私有属性的方法
            this.getName = function () {};
            this.setName = function () {};
            this.getPrice = function () {};
            this.setPrice = function () {};
            
            //对象共有方法
            this.copy = function () {
                // ...
            }

            //安全模式
            // console.log(this)//Book or Window
            if(this instanceof Book){ 
         
                this.setName(name);
                this.setPrice(price);

            }else{
                return new Book(id, name, price)
            }
           
        }

        //类静态共有属性和方法(实例对象不能访问)
        Book.isChinses = true;

        Book.resetTime = function () {
            console.log('new time')
        }

        //共有属性和方法
        Book.prototype = {
            isJSBook: false,

            display: function () {
                console.log('display')
            }
        }
  • 17
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值