美文网首页饥人谷技术博客
js - 面向对象知识点

js - 面向对象知识点

作者: 冯走心 | 来源:发表于2016-02-27 11:19 被阅读204次
    • new
    • new 去调用一个函数:这个时候函数中的 this 就是创建出来的对象。
    • 函数的返回值直接就是 this隐式返回
     function Person(name){
         this.name = name;
         this.showName = function(){
              alert(this.name);
         }
         // 隐式返回当前的this,所以return可以省略
         // return this;
     }
    var p1 = new Person('小明');
    var p2 = new Person('小强');
    
    • 构造函数

      • new 后面调用的函数就叫做构造函数
    • 原型

      • prototype 去改写对象下面的功用的方法或者属性,让公用的方法或者属性在内存中只存在一份(提高性能
      • 原型 :css中的class
      • 普通的方法 : css中的style
      • 优先级: 对象自身绑定的属性或方法,要高于在原型上绑定的属性或方法
      function 构造函数(属性){
          this.属性=属性;
    }
    构造函数.原型.方法 = function(){
          console.log(this.属性);
    };
    var 对象1 =  new 构造函数();
     对象1.方法();
    
    • 原型链

      • 实例对象于原型之间的连接,叫做原型链。
      • __proto__ (隐式链接)
      • Object 对象类型是原型链的最外层
    • hasOwnProperty

      • 看是不是对象自身下面的属性
    var arr = [];
    arr.num = 10;
    Array.prototype.num2 = 20;
    console.log(arr.hasOwnProperty('num')) //true
    console.log(arr.hasOwnProperty('num2')) //false
    console.log(arr.hasOwnProperty == Object.prototype.hasOwnProperty);//true 不是自身而是最外层的Object中的
    
    • constructor
      • 查看对象的构造函数
    function Person() {}
    Person.prototype.constructor = Person; //这句会隐式自动生成
    var p = new Person();
    console.log(p.constructor);
    
    • instanceof
      • 对象与构造函数在原型链上是否有关系
    p instanceof Object  // true
    
    • toString()
      • 把对象转成字符串
      • 利用toString做类型的判断 ()
    var arr = [];
    console.log( Object.prototype.toString.call(arr) == '[object Array]' );  //'[object Array]'
    //举例为什么说这种类型判断的方式是最佳的
    window.onload = function(){
           var oF = document.createElement('iframe');
           document.body.appendChild( oF );
          var ifArray = window.frames[0].Array;
          var arr = new ifArray();
          console.log( arr.constructor == Array );  //false
          console.log( arr instanceof Array );  //false
          console.log( Object.prototype.toString.call(arr) == '[object Array]' );  //true
    };
    //封装方法
    var classType = [];
    'Boolean Number String Function Array Date RegExp Object Error'.split(' ').forEach(function(name) {
       classType['[object ' + name + ']'] = name.toLowerCase();
    });
    function getType(obj) {
       if (obj == null) {
           return String(obj);
       }
       return typeof obj === 'object' || typeof obj === 'function' ? classType[classType.toString.call(obj)] || 'object' : typeof obj;
    }
    
    • 继承

      • 子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 )
      • 属性的继承 : 调用父类的构造函数 call
      • 方法的继承 : for in
    • 常见继承方法

      • 拷贝继承 (jquery也是采用拷贝继承extend)
    //父类
    function Person(name, sex) { 
            this.name = name;
            this.sex = sex;
    }
    Person.prototype.showName = function() {
            console.log(this.name);
    };
    //
    var p1 = new Person('小明', '男');
        //p1.showName();
    //
    //子类
    function Star(name, sex, job) { 
            Person.call(this, name, sex);//继承父类属性
            this.job = job;
    }
    //Star.prototype = Person.prototype; 通过这句可以做到继承,但是这是对象引用,一旦子类修改对象,会影响父类
    //
    extend(Star.prototype, Person.prototype); //采用拷贝继承则解决,影响父类的问题
    //
    Star.prototype.showJob = function() {};
    var p2 = new Star('黄晓明', '男', '演员');
    p2.showName();
    //
    function extend(obj1, obj2) {
            for (var attr in obj2) {
                obj1[attr] = obj2[attr];
            }
    }
    
    • 类式继承
      • JS是没有类的概念的 , 把JS中的构造函数看做是类
      • 要做属性和方法继承的时候,要分开继承
    function Person() { //父类
                this.name = [1, 2, 3];
    }
    //
    Person.prototype.showName = function() {
                alert(this.name);
    };
    //
    function Star() { //子类
                Person.call(this); //属性继承
    }
    //关键的四句话
    var F = function() {}; // 1. 创建一个新构造函数
    F.prototype = Person.prototype; // 2. 新构造函数的原型指向要继承的父类构造函数
    Star.prototype = new F(); // 3. 子类构造原型指向新构造函数的一个实例,可以使用父类的方法
    Star.prototype.constructor = Star; // 4. 修正子类的指向,在上一步的时候它的原型指向了父类,所以需要修正回来
    //
    var p1 = new Star();
    p1.showName();
    alert(p1.name);
    alert(p1.constructor);
    p1.name.push(4);
    var p2 = new Star();
    alert(p2.name);
    
    • 原型继承
      • 父类采用json的生命方式
      • 原型继承中如果属性是对象,则子类修改继承的属性同样会父类也会被修改
    var Person = {
                des:'小丽',
                name: [1, 2, 3],
                showName: function() {
                alert(this.name);
        }
    };
    //
    function clone(o) {//创建一个clone函数
                function F() {};
                F.prototype = o;
                return new F();
    }
    //
    var p1 = clone(Person);
    p1.des='小美';
    p1.name.push(4);
    p1.showName();
    Person.showName();
    console.log(p1.des);
    console.log(Person.des);
    

    参考

    以上是对知识点的笔记,详细的js的面向对象可以百度或参考下面的文章
    三生石上 - JavaScript继承详解系列

    相关文章

      网友评论

        本文标题:js - 面向对象知识点

        本文链接:https://www.haomeiwen.com/subject/sopwkttx.html