JavaScript中的constructor和继承

Posted 馒头加梨子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中的constructor和继承相关的知识,希望对你有一定的参考价值。

概述

这是我在看JavaScript面向对象编程指南的时候,对constructor和继承的总结。

关于它们的详细知识,可以上网查到,所以我只写那些网上没有的。

内容

  • constructor的理解
  • constructor的实际用途
  • constructor的陷阱
  • 从应用角度理解继承
  • 函数构造器的继承
  • 纯对象的继承

constructor的理解

constructor 属性是一个指针,指向创建此对象的函数。(可以更改)

constructor的实际用途

看下面这段代码:

var a,b;
(function(){
  function A (arg1,arg2) {
    this.a = 1;
    this.b=2; 
  }

  A.prototype.log = function () {
    console.log(this.a);
  }
  c = new A();
})()
c.log();
// 1

实例c是用闭包建立的,但是因为A是在闭包里面,所以我们不能直接访问A。但是如果需要给A添加方法怎么办呢?方法是用constructor

c.constructor.prototype.log2 = function () {
  console.log(2)
}

c.log2();
// 2

constructor的陷阱

//继承
Child.prototype = new F();
Child.prototype.constructor = Child;

我们一般在继承中,要给constructor属性进行重置,比如上面那段代码,这是为什么呢?

先来看看一个例子:

function Dog(){this.tail = true;}
var benji = new Dog();
Dog.prototype.say = function(){return 'woof';};

Dog.prototype = {paws:4}
var lucy = new Dog();

benji.constructor.prototype.paws
//4
lucy.constructor.prototype.paws
//undefined

其中,benjilucy都是Dog()的子对象,但是结果却不相同。造成这种结果的原因是Dog.prototype = {paws:4}重置了Dog()的原型。(原理不明,貌似和__proto__有关。)

如果在Dog.prototype = {paws:4}后面再加一条语句Dog.prototype.constructor = Dog;结果就一样了。这也是为什么在继承中要重置constructor的原因。

从应用角度理解继承

继承,就是对父元素的代码复用。

//父元素是函数构造器
function Parent() {
    this.id = 3;   //带this的自身属性
    var od = 5;  //不带this的自身属性
}
Parent.prototype.ud = 7;  //原型属性

//父元素是纯对象
Parent= {id:9};
Parent.prototype.ud = 7;

综合考虑一下,父元素分为2种:函数构造器和纯对象。父元素里面的代码又分为自身属性和原型属性。(方法和属性差不多,所以只考虑属性。)

所以我们分别来讨论函数构造器和纯对象的代码复用,即属性继承。

函数构造器的继承

  • 只继承原型属性

很简单,只需要把父对象的原型赋值给子对象即可。(原型继承法

Child.prototype = Parent.prototype;

但是这样的话,修改子对象的原型会影响父对象的原型,所以我们考虑用闭包。(临时构造器法

var F = function() {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;

但是如果子对象的prototype本来就有值,所以不能直接进行prototype的赋值。这个时候我们可以直接把属性拷贝过去。(原型属性拷贝法

var p = Parent.prototype;
var c = Child.prototype;
for (i in p) {
    c[i] = p[i];
}

当然,还有深拷贝法,这里就不贴代码了。

  • 只继承自身属性。

首先想到的就是拷贝法,上面贴过代码这里就补贴了。但是拷贝法只能继承父对象中不带this的自身属性。

如果想只继承带this的自身属性,可以用构造器借用法

function Child() {
    Parent.apply(this, argument);
}

如果想全部继承的话,那就只能两者结合了。

  • 同时继承自身属性和原型属性

这个时候,我们第一个想到的就是用new。(原型链法

Child.prototype = new Parent();

需要注意的是,这时子对象仅继承父对象中带有this的自身元素,不继承不带this的自身元素。

其它方法就只能结合上面多个方法了。

纯对象的继承

  • 只继承原型属性。

和函数构造器的继承一样。

  • 只继承自身属性。

当父元素是纯对象的时候,它里面没有this的自身元素。所以只需用拷贝法即可。

另外,还可以把父元素的自身元素放到子元素的prototype里面去。(原型继承法)

function object() {
    function F(){};
    F.prototype = Parent;
    return new F();
}
  • 同时继承自身属性和原型属性

这个就是结合上述方法了。

以上是关于JavaScript中的constructor和继承的主要内容,如果未能解决你的问题,请参考以下文章

js中的constructor

javascript中 原型对象中的 例如:obj.prototype.constructor指向错误,不是指向构造函数本身,那有啥影响?

javascript中的类

JavaScript中的面向对象编程,详解原型对象及prototype,constructor,proto,内含面向对象编程详细案例(烟花案例)

JavaScript中的构造函数

JavaScript constructor 属性用法和实例