js面向对象

有java基础学习js的面相对象就容易很多，主要记录一下重点；

1. 在js中没有class的概念，只有构造函数，或者说在js中构造函数其实就是class
   没有在构造函数中声明的，就是变量，在构造函数中的就是属性
   function，不在类中就是函数，在类中就是方法
   创建一个类的方式如下：

           function Person(name,sex){
                this.name = name;
                this.sex = sex;
                function showName(){
                    alert(this.name);
                }
                function showSex(){
                    alert(this.sex);
                }
            }
   

2. prototype 原型
   作用其实就是给类添加属性或者方法
   1中的代码可以改为如下方式：

         function Person(name,sex){
              this.name = name;
              this.sex = sex;
          }
          Person.prototype.showName = function(){
              alert(this.name);
          }
          Person.prototype.showSex = function(){
              alert(this.sex);
          }
   

   优先级：直接给对象添加的优先级高于原型添加
3. 在面相对象中，特别要注意this的使用；这里强调一点：但凡使用了定时器，定时器中的this指的都是window对象
4. 继承：js并没有提供继承这个功能，可以通过其他方式实现

          function Person(name,sex){
               this.name = name;
               this.sex = sex;
           }
           Person.prototype.showName = function(){
               alert(this.name);
           }
           Person.prototype.showSex = function(){
               alert(this.sex);
           }
           function Worker(name,sex,job){
               //挑用父级的构造函数
               Person.call(this,name,sex);
               this.job = job;
           }
           //原型链    继承父级的方法
           Worker.prototype = Person.prototype;
           Worker.prototype.showJob = function(){
               alert(this.job);
           }
           var w = new Worker("name","sex","job");
           w.showJob();
           w.showSex();
   

   以上方式就实现了继承，但是有一个问题，当如下代码被执行时，发现Person被修改了

 alert(Person.prototype.showJob);

image.png

在Person中没有Job方法，这里反而能够访问到；
问题就是上面的Worker.prototype = Person.prototype;并不是进行了赋值，而是引用，后面对Worker修改，导致父类Person也被修改；下面使用简单的代码和图描述一下js中的引用
引用代码：

         var arr1 = [1,2,3];
          var arr2 = arr1;//这里只是引用，并没有真的去赋值
          arr2.push(4);//这里，arr1和arr2都成1,2,3,4，因为引用指向的是同一个东西，不管修改哪一个都会变化
          alert(arr1);//1,2,3,4
          alert(arr2);//1,2,3,4

初始化了一个arr1，这个时候arr1拥有如下的空间；var arr2 = arr1;这句代码的效果如下图，可见arr1和arr2拥有同一个空间，不管修改arr1还是arr2都修改了同一个空间

image.png

想要赋值只能采用以下方式

          var arr3 = [];          
          for(var i=0;i<arr1.length;i++){
               arr3[i] = arr1[i];
           }
           arr3.push(5);
           alert(arr1);//arr1不会改变
           alert(arr3);//arr3改变成1,2,3,4,5

所以继承的方式只能改成如下方式：

            function Person(name,sex){
                this.name = name;
                this.sex = sex;
            }
            Person.prototype.showName = function(){
                alert(this.name);
            }
            Person.prototype.showSex = function(){
                alert(this.sex);
            }
            function Worker(name,sex,job){
                //挑用父级的构造函数
                Person.call(this,name,sex);
                this.job = job;
            }
            //原型链    继承父级的方法;
            //Worker.prototype = Person.prototype;
            //所以这里需要改成循环方式
            for(var i in Person.prototype){
                Worker.prototype[i] = Person.prototype[i];
            }
            Worker.prototype.showJob = function(){
                alert(this.job);
            }
            alert(Person.prototype.showJob);

这里alert出的结果会是undefined