美文网首页
对象、构造函数和js继承

对象、构造函数和js继承

作者: 头头_d92d | 来源:发表于2018-09-19 15:55 被阅读0次

对象

对象的创建方式是用关键字 new 后面跟上实例化的类的名字,定义对象名字需要大写,没有参数的话后面括号可以省略
创建对象var obj = new obj();
废除对象obj = null;

构造函数

  • 工厂方式
function createCar() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar();
var oCar2 = createCar();

缺点:用这种方式必须创建对象的方法。每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。
解决方法:在工厂函数外定义对象的方法,然后通过属性指向该方法

function showColor() {
  alert(this.color);
}

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}
  • 构造函数方式
function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.showColor = function() {
    alert(this.color);
  };
}

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

缺点:构造函数也会重复生成函数,为每个对象都创建独立的函数版本

  • 原型方式
function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

缺点:
1.这个构造函数没有参数,不能通过给构造函数传递参数来初始化属性的值
2.属性指向的是对象,而不是函数,对象共享造成属性值不能随意改变

综上所述推荐使用混合方式

  • 混合的构造函数/原型方式
    用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);   //输出 "Mike,John,Bill"
alert(oCar2.drivers);   //输出 "Mike,John"

js继承机制实现

  • call()方法
    ClassA.call(obj, sColor);第一个参数是 对象,第二个是函数要传的参数
    此行代码的意思是把对象ClassA的属性和方法继承给obj对象

  • apply()方法
    ClassA.apply(this, arguments);第一个参数仍是 obj,第二个参数可以把 ClassB 的整个 arguments 对象作为第二个参数传递给 apply() 方法

原型链继承

function ClassA(sColor) {
    this.color = sColor;
}

ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB(sColor, sName) {
    ClassA.call(this, sColor);//在 ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性
    this.name = sName;
}

ClassB.prototype = new ClassA();//用原型链继承 ClassA 类的方法

ClassB.prototype.sayName = function () {
    alert(this.name);
};

相关文章

  • js原型和继承

    说到原型就不得不说构造函数,js一切皆对象,但分为普通对象和函数对象,构造函数就属于函数对象,所谓的原型和继承也是...

  • 面向对象继承复习

    js基础的面向对象的继承 构造函数继承 这种方法的缺陷是只会继承构造函数上的实例属性,并不会继承原型对象上的属性,...

  • 对象、构造函数和js继承

    对象 对象的创建方式是用关键字 new 后面跟上实例化的类的名字,定义对象名字需要大写,没有参数的话后面括号可以省...

  • 面向对象五

    面向对象高级二 总结 PHP 里的面向对象、继承方式 JS 里的继承方式 call(构造函数伪装) 和 proto...

  • JS对象和继承

    JS 对象创建的三种方式 字面量创建方式 系统内置构造函数方式 自定义构造函数 继承方式 for in 继承 原型...

  • 实现构造函数及实例扩展

    prototype原型机制,在JS中,可以帮助实现对构造函数,以及实例继承和扩展。 定义对象后,定义构造函数,并设...

  • js的继承方式

    1 类式继承 子类的原型对象 2 构造函数继承 创建即继承 3 组合继承 (类式继承和构造函数...

  • JS对象和继承

    JS对象和继承 JS是个无类的语言,因此对于对象构造器(类)和对象的继承就值得我们研究了。本文讲述JS中构造器的表...

  • js 继承

    js继承有四种方式 1. 构造函数绑定 使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象...

  • JavaScript 10

    js继承的概念 1.通过原型链方式实现继承(对象间的继承) 2.类式继承(构造函数间的继承) 由于js不像Java...

网友评论

      本文标题:对象、构造函数和js继承

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