zoukankan      html  css  js  c++  java
  • js面向对象(一)——封装

    想写这个好久了,自己当时理解这个确实费了一番功夫,现在记录一下,哪怕对读者有一点点帮助,我也很开心,看着不爽大胆喷吧,我脸皮可厚了,闲话不说了,进入正题

    --------------------------------------------------我是分割线---------------------------------------------------------

    JavaScript是一门基于对象的语言,但它又不是传统意义上的面向对象程序编程语言,它不像java语言有类(class)的概念(es6不算,否则就打脸了),

    首先什么是对象?简单说什么都是对象,对象具有封装和继承,以及对象与对象之间使用消息通讯,各自之间消息隐藏

    对象的特性为封装、继承和多态;

    本节我们就说说封装:

      举个例子:

    var dog1={};
        dog1.name="道哥";
        dog1.six="";
    alert(dog1.name)     //输出道哥
    var dog2={};
        dog2.name="二哈"; 
       dog2.six="公";
    alert(dog2.name) //输出二哈

    这就是一个简单的面向对象的封装,不过这中方式很low(不然怎么能说后面的方法高明呢),当对象很多,这样建立对象不仅费时费力而且会浪费大量内存,不可取,所以我改进了一下,引入函数

    function Dog(name,s){
        this.name=name;
        this.sex=s;
            this.type="犬科";
            this.speck=function(){
                    alert("汪汪。。。")    
            }   
    }    
    var dog1=new Dog("道哥","");
    var dog2=new Dog("二哈","");
    alert(dog1.name):    //输出道哥
    alert(dog2.name):    //输出二哈
    alert(dog1.type);     //输出犬科
    alert(dog2.type);     //输出犬科

    这样就高明了不少,当然也有不足,就像你在一家狗舍,里面有很多狗,然后你问这狗叫啥,饲养员说是“道哥”,然后你问它是什么类型,饲养员说是“犬科”,狗很多,你这样问估计饲养员早就烦了,那假如我们在狗舍的墙上写一张告示,上面写明所有狗的共同特性,比如类型,叫声等等嗯,那些共同属性有人问往墙上一指就看到了;

    放在代码里就是每建立一个对象就需要重新建立那些共有的属性,这样会浪费大量的内存,很不明智,那么代码中有没有像上面的那么一块“告示牌”呢?答案是当然有。这里我们就需要引入一个新的名词:“prototype”,这是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象,我们可以将我们要定义的方法添加给prototype属性,即

    function Dog(name,s){
        this.name=name;
        this.sex=s;
    }
    Dog.prototype.type="犬科";
    Dog.prototype.spack=function(){
      alert("汪汪。。。")
    };

      var dog1=new Dog("道哥","公");
      var dog2=new Dog("二哈","公");

    此刻我们可以输出

    alert(dog1.name)    //输出道哥
    alert(dog1.type)    //输出犬科
    dog1.spack();       //弹出汪汪。。。
    alert(dog2.name)    //输出二哈
    alert(dog2.type)    //输出犬科
    dog2.spack();       //弹出汪汪。。。

      因为prototype是一个指针,所以此刻所有的实例(name和spack()),其实都是同一内存地址,指向了prototype对象

    下面列一些检测protopypt的方法:

            //isPrototypeOf是检测protopype对象和实例之间的关系,如下面输出,dog1继承于Dog,故输出为true,而cat1继承于Cat,与Dog没啥关系,所以输出为false
            alert(Dog.prototype.isPrototypeOf(dog1));    //true
            alert(Dog.prototype.isPrototypeOf(cat1));    //false
    
            //hasOwnProperty属性判断该属性是自己的属性还是继承于prototype的属性,name是dog1自己的属性,所以输出为1,而type是继承于prototype的属性,所以输出为false
            alert(dog1.hasOwnProperty("name"));          //true
            alert(dog1.hasOwnProperty("type"));          //false
    
            //in是检测该属性是否是对象的属性,不管是自己的属性还是继承于prototype的属性,例如下面的name和spack是cat1的属性,所以输出为true,而cat1并没有“wife”的属性,所以输出为false;当然in也可以遍历对象的所有属性;
            alert("name" in cat1);
            alert("spack" in cat1);
            alert("wife" in cat1);
    
            //in遍历属性
            for(var i in dog1){
                alert("dog1---"+i)   //这样就能输出所有的属性了
            }

    --------------------------------------------------------------------------------------------------------------------------------------------------------------------

    本文借鉴阮大师文章,地址如下:

    http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
  • 相关阅读:
    2021年4月28日
    2021年4月18日
    2021年3月4日
    2020年11月20日
    20201112
    ThreadLocal原理分析
    git与gitlab
    DevOps与CICD简介
    代码扫描利器sonarqube
    看完小白也会使用,Android投屏神器scrcpy详细教程
  • 原文地址:https://www.cnblogs.com/teersky/p/7344777.html
Copyright © 2011-2022 走看看