继承模式、命名空间、对象枚举

继承发展史

1.传统模式：原型链

缺点：过多的继承了没用的属性

<script type="text/javascript">
        Grand.prototype.lastName = "Ruan"
        function Grand(){

        }
        var grand = new Grand();
        Father.prototype = grand;
        function Father(){

        }
        var father = new Father();
        Son.prototype = father;
        function Son(){

        }
        var son = new Son();
</script>

2.借用构造函数（call/apply）

缺点：不能继承借用构造函数的原型

每次构造函数都要多调用一个函数

3.共享原型

缺点：不能随便更改自己的原型

<script type="text/javascript">
       Father.prototype.lastName = "Ruan"
       function Father(){

       }
       function Son(){

       }
       function inherit(Target,Origin){//共享原型，封装成函数
            Target.prototype = Origin.prototype;
       }
       inherit(Son,Father);
       var son = new Son();
</script>

 4.圣杯模式

 <script type="text/javascript">
       Father.prototype.lastName = "Ruan"
       function Father(){

       }
       function Son(){

       }
       function inherit(Target,Origin){
            function F(){}
            F.prototype = Origin.prototype;
            Target.prototype = new F();
            Target.constructor = Target;
            Target.uber = Origin.prototype;
       }
       inherit(Son,Father);
       var son = new Son();
    </script>

<script type="text/javascript">
        Father.prototype.lastName = "Ruan"

        function Father() {

        }

        function Son() {

        }
        var inherit = (function () {//立即执行函数写法
            var F = function () {}//私有化属性
            return function (Target, Origin) {
                F.prototype = Origin.prototype;
                Target.prototype = new F();
                Target.constructor = Target;
                Target.uber = Origin.prototype;
            }
        }())
        inherit(Son, Father);
        var son = new Son();
    </script>

 

命名空间

管理变量，防止污染全局，适用于模块化开发。

方法：用对象；闭包；webpack

 

模仿JQuery实现链式调用模式

函数返回当前对象

 <script type="text/javascript">
        var student = {
            study: function(){
                console.log("study");
                return this;
            },
            ask: function(){
                console.log("ask");
                return this;
            },
            read: function(){
                console.log("read");
                return this;
            }
        }
</script>

 

属性表示方法

方法一：对象.属性名

方法二：对象['属性名']

这两种方法是等价的，使用方法一会转换成方法二的形式

<script type="text/javascript">
        var fruit = {
            fruit1: "apple",
            fruit2: "banana",
            fruit3: "orange",
            sayFruit: function(num){
                console.log(this['fruit'+num]);
            }
        }
</script>

对象的枚举

fo in

for in枚举方法可用于循环次数不确定的情况

<script type="text/javascript">
      var obj = {
          name: "Ruankj",
          age: 21,
          sex: "男",
          tel: "15219",
          grade: 21
      }
      for(var prop in obj){
            console.log(obj[prop]);
      }
</script>

 for in 枚举注意不能用obj.prop访问属性，相当于obj['prop']，在obj对象里找一个属性名是prop的属性

prop的数据类型是 string

hasOwnProperty

判断对象是否包含某个属性

<script type="text/javascript">
      var obj = {
          name: "Ruankj",
          age: 21,
          sex: "男",
          tel: "15219",
          grade: 21,
          __proto__: {
              lastName: "Ruan",
              salary: 200000
          }
      }
      for(var prop in obj){
          if(obj.hasOwnProperty(prop)){
            console.log(prop+" "+obj[prop]);
          }
      }
</script>

输出：

 

 

注意__proto__属性不属于obj对象自身的属性

in

和hasOwnProperty差不多，区别在于in用来判断对象是否能访问某属性（包括__proto__中的属性）

instanceof

A instanceof B

作用：判断A对象是不是B构造函数构造出来的，准确来说是判断A对象的原型链上有没有B的原型

 

判断一个变量是数组还是对象的方法

<script type="text/javascript">
      var unknown1 = {};
      var unknown2 = [];
      //方法一
      console.log(unknown1.constructor);
      console.log(unknown2.constructor);
      //方法二
      console.log(unknown1 instanceof Array);
      console.log(unknown2 instanceof Array);
      //方法三
      console.log(Object.prototype.toString.call(unknown1));
      console.log(Object.prototype.toString.call(unknown2));
</script>

运行结果：