深入理解 Javascript 之 JS的封装

张汉庆发布于2019-08-23 10:55 / 3107人阅读

摘要：封装常见的封装类中的共有和私有执行结果如下原因是调用的时候，指向的其实是，因此没有输出解决办法更改指向工厂函数也有对于程序员来说这三个关键字应该是很熟悉的哈，但是在中，并没有类似于这样的关键字，但是我们又希望我们定义的属性和方法有一定的访问

封装

常见的封装

function Person (name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
 
Pserson.prototype = {
    constructor:Person,
    sayHello:function(){
        console.log("hello");
    }
}

类中的共有和私有

function Person(pname){
    var age = 10;
    function pm(){
        console.log(this.name)
    }
    
    this.name = pname;
    this.test: function(){
        console.log("public methods");
        pm();
    }
}

执行结果如下：

（原因是调用pm的时候，this指向的其实是window，因此没有输出）

解决办法

function Person(pname){
    var age = 10;
    function pm(){
        console.log(this.name)
    }
    
    this.name = pname;
    this.test: function(){
        console.log("public methods");
        pm.call(this); // 【】更改this指向
        // pm();
    }
}

工厂函数

function Person(name){
    function pm(){
        console.log(self.name);
    }    
    var self = {
        name: name,
        test: function(){
            pm();
        }
    }
    
    return self;
}

javascript也有private public protected

对于java程序员来说private public protected这三个关键字应该是很熟悉的哈，但是在js中，并没有类似于private public protected这样的关键字，但是我们又希望我们定义的属性和方法有一定的访问限制，于是我们就可以模拟private public protected这些访问权限。

上栗子

var Book = function (id, name, price) {
      // private(在函数内部定义，函数外部访问不到，实例化之后实例化的对象访问不到)
      var _num = 1;
      var _id = id;
      // 私有函数
      function _checkId(id) {
        console.log("private");
        console.log(_id);
        // 这里只能访问私有变量和方法，
        // 如果访问this.name是访问不到的，
        // 如果访问需要重新指向this
      }

      // protected(可以访问到函数内部的私有属性和私有方法，在实例化之后就可以对实例化的类进行初始化拿到函数的私有属性)
      this.getName = function () {
        _checkId();
        console.log(this.name);
      }

      this.getPrice = function () {
        console.log(price);
      }

      // public
      this.name = name;
      this.copy = function () {
        console.log("this is public")
        console.log(this.name)
        console.log(price);
      }



    }

    //在Book的原型上添加的方法实例化之后可以被实例化对象继承
    Book.prototype.profunction = function () {
      console.log("this is profunction");
    }
    //在函数外部通过.语法创建的属性和方法，只能通过该类访问，实例化对象访问不到
    Book.setTime = function () {
      console.log("this is new time")
    }
    var book1 = new Book(1, "zjj", 2000);
    console.log(book1);
    book1.getName(); // 111 getName是protected，可以访问到类的私有属性，所以实例化之后也可以访问到函数的私有属性
    // book1._checkId();        //报错book1.checkId is not a function
    console.log(book1.id) // undefined id是在函数内部通过定义的，是私有属性，所以实例化对象访问不到
    console.log(book1.name) //name 是通过this创建的，所以在实例化的时候会在book1中复制一遍name属性，所以可以访问到
    book1.copy() //this is public
    book1.profunction(); //this is proFunction
    Book.setTime(); //this is new time
    book1.setTime(); //报错book1.setTime is not a function

云服务器 GPU云服务器深入理解webrtc之aec 深入理解javascript 深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96818.html

深入理解ES6之《用模块封装代码》

摘要：导入模块的代码执行后，实例化过的模块被保存在内存中，只要另一个语句引用它就可以重复使用它和的一个重要的限制是它们必须在其它语句和函数之外使用，也就是说不允许出现在语句中，不能有条件导出或以任何方式动态导出。什么是模块模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码在模块的顶部this的值是undefined 其模块不支持html风格的代码注释除非用def...

BigTomato 2019-08-20 18:58 评论0 收藏0
深入理解ES6之《用模块封装代码》

摘要：导入模块的代码执行后，实例化过的模块被保存在内存中，只要另一个语句引用它就可以重复使用它和的一个重要的限制是它们必须在其它语句和函数之外使用，也就是说不允许出现在语句中，不能有条件导出或以任何方式动态导出。什么是模块模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码在模块的顶部this的值是undefined 其模块不支持html风格的代码注释除非用def...

AbnerMing 2019-08-29 13:14 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
JavaScript之深入各种继承

摘要：通常有这两种继承方式接口继承和实现继承。理解继承的工作是通过调用函数实现的，所以是寄生，将继承工作寄托给别人做，自己只是做增强工作。适用基于某个对象或某些信息来创建对象，而不考虑自定义类型和构造函数。一、继承的概念继承，是面向对象语言的一个重要概念。通常有这两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。《JS高程》里提到：由于函数没有签名，...

tomlingtm 2019-08-23 17:08 评论0 收藏0