0
点赞
收藏
分享

微信扫一扫

前端:面向对象编程

晚熟的猫 2022-04-19 阅读 89
javascript

目录

 

一:面向对象编程:

把数据及对数据的操作方法放在一起,作为一个整体对象。抽出同类对象的共性,形成类。通过一个简单的外部接口与外界发生关系,程序流程由用户在使用中决定。

1.区分一般函数和构造函数的方法:

2.构造函数(constructor)

3.实例化对象的方法:

4.new运算符的作用

5.原型链 

6.继承

a.原型链继承

b.借用构造函数继承

c.组合式继承(原型链继承+借用构造函数继承)


一:面向对象编程:

把数据及对数据的操作方法放在一起,作为一个整体对象。抽出同类对象的共性,形成类。通过一个简单的外部接口与外界发生关系,程序流程由用户在使用中决定。

具体体现,构建方法:构建出一个类(类中包含具有其种类的共性),用此类实例化出一个对象(具有类中的所有共性), 对象是实例化的结果。

1.区分一般函数和构造函数的方法:

构造函数:String(),Number(),Boolean(),Object(),Array(),   为了区别一般函数与构造函数:通常构造函数首字母大写。本质上函数能否当作构造函数主要看返回值是否是对象,是对象则不是构造函数。

2.构造函数(constructor

包含成员变量和成员方法,且必须使用this指针(让构造出来的对象指向对应的成员变量和成员方法),使用new来生成对象。

注:只有构造函数有原型对象(prototype),对象通过原型链拿到原型上的方法。

3.实例化对象的方法:

var 变量1 = new 构造函数


        // 实例化的对象身上会有类中的共性(公共的属性,公共的方法)
        // 成员属性,成员方法
        var color = "red";  //全局变量,在整个作用域中都可以使用
        function Cat(){   //作用域
            var color = "yellow";  //局部变量,在局部优先使用,作用域出栈时被销毁
            this.color = "blue";  //成员变量,被实例化的对象所继承
            this.miao = function (){
                alert("喵喵喵");
            }
        }
        Cat.color = "gray";   //静态变量,给类的变量
        // JSON.parse
        // Math.abs
        var tom = new Cat();
        console.log(tom.color);
        tom.miao();

4.new运算符的作用

  • 创建一个空对象obj
  • 将该对象的__proto__指向构造器的原型对象
  •  继承原型链上的方法,将构造函数的作用域赋给新对象   
  • 返回obj 

5.原型链 

对象的构造器原型(__proto__)指向构造器的原型对象,而该原型对象也是对象,也有__proto__,该链会一直指向Object的原型对象,再后面就是null了,这条链就是原型链。

当对象自身属性列表上没有找到一个属性时,会通过原型链一级一级的往上找,直到找到该属性。

6.继承

子类继承父类,父类中的属性和方法,子类也会包含。继承由上自下层层实现,子类在保持父类的特性之外,有自己独特的属性。

1)es5中的继承:

a.原型链继承

缺点:直接继承了父类的原型,父类的属性不能传参,当子类对象1修改了父类的属性,子类对象2对应的父类的属性也会被修改。

function Parent(name){
    this.name = name;
    this.arr = [1,2]
  }
function Child(age){
    this.age = age;
  }
//创建父类的实例给到子类的原型上。
  Child.prototype = new Parent("小明");   //原型链继承的方法;

  var oC1 = new Child(12);
  var oC2 = new Child(20);
 // 对象输出一个属性的时候会先在自身属性列表上找,如果找不到会往原型链上找。
  oC1.arr[0] = 10
  // console.log(oC1);  //10
  console.log(oC2.arr[0]);  //10

b.借用构造函数继承

优点:解决了原型链继承无法改变父类属性的不足。

缺点:每次都会创建一个新的父类的成员方法,当有多个对象但是仅仅需要一个方法的时候会过度消耗性能;子类无法继承父类原型链上的方法。

   function Parent(name){
        this.name = name;
        this.f1 = function(){
            console.log("f1");
        }
    }
    function Child(name,age){
        Parent.call(this,name);   //借用构造函数继承的方法;
        this.age = age;
    }
    // 把p2加到child的原型上即加到Parent身上
    Child.prototype.p2 = function(){
        console.log("p2");
    }

    var oC1 = new Child("小蓝",12);
    var oC2 = new Child("小红",20);
    console.log(oC1);
    console.log(oC1.f1 == oC2.p1)  //false
//说明每次都会创建新的f1方法

c.组合式继承(原型链继承+借用构造函数继承)

优点:将原型链继承+借用构造函数继承优点结合起来,通过原型继承父类原型上的属性和方法,通过构造函数的方法继承父类的属性

 function Parent(name){
        this.name = name;
        this.f1 = function(){
            
        }
    }
    Parent.prototype.p1 = function(){
        console.log("p1");
    }
    function Child(name,age){
        Parent.call(this,name);   //借用构造函数继承;
        this.age = age;
    }
    Child.prototype = new Parent();  //原型链继承
    Child.prototype.p2 = function(){
        console.log("p2");
    }
    var oC1 = new Child("小蓝",12);

d:寄生组合继承   使用生孩子函数Object.create();

 function Perple(name) {
    this.name = name;
    this.style = ["眼睛","鼻子","嘴巴"];
  }
  Perple.prototype.sayName = function (){
   console.log(this.name);
  }
  function Child(age,name) {
   Perple.call(this,name)
   this.age = age;
  }
  var beget = Object.create(new Perple());
  Child.prototype = beget;
  beget.constructor = Child;
  Child.prototype.sayAge = function (){
   console.log(this.age);
  }
  var c1 = new Child(12,"小明");
  // c1.sayName();
  // c1.sayAge();
  console.log(c1);
举报

相关推荐

0 条评论