javascript 本身不是面向对象的语言,而是基于对象的语言,对于习惯了其他 OO 语言的人来说,起初有些不适应,因为在这里没有 "类" 的概念,或者说 "类" 和 "实例" 不区分,更不要指望有 "父类"、"子类" 之分了。那么,javascript 中这一堆对象这么联系起来呢? 幸运的是,javascript 在设计之初就提供了 "继承" 的实现方式,在认识 "继承" 之前,我们现在先来了解下原型链的概念。
我们知道原型都有一个指向构造函数的指针,假如我们让
原型对象等于另一个类型的实例
- SubClass
会怎么样?此时,
- new SuperClass()
原型对象包含一个指向
- SubClass
原型的指针,
- SuperClass
原型中也包含一个指向
- SuperClass
构造函数的指针。。。这样层层递进下去,就形成了一个
- SuperClass
。
- 原型链
具体代码如下:
- function SuperClass(){
- this.name = "women"
- }
- SuperClass.prototype.sayWhat = function(){
- return this.name + ":i`m a girl!";
- }
- function SubClass(){
- this.subname = "your sister";
- }
- SubClass.prototype = new SuperClass();
- SubClass.prototype.subSayWhat = function(){
- return this.subname + ":i`m a beautiful girl";
- }
- var sub = new SubClass();
- console.log(sub.sayWhat());//women:i`m a girl!
通过上面的代码中可以看出 SubClass 继承了 SuperClass 的属性和方法,这个继承的实现是通过将 SuperClass 的实例赋值给 SubClass 的原型对象,这样 SubClass 的原型对象就被 SuperClass 的一个实例覆盖掉了,拥有了它的全部属性和方法,同时还拥有一个指向 SuperClass 原型对象的指针。
在使用原型链实现继承时有一些需要我们注意的地方:
的变化。此处 sub 的 constructor 指向的是 SuperClass,因为 SubClass 的原型指向了 SuperClass 的原型。在了解原型链时,不要忽略掉在末端还有默认的 Object 对象,这也是我们能在所有对象中使用 toString 等对象内置方法的原因。
- constructor
- function SuperClass(){
- this.name = "women"
- }
- SuperClass.prototype.sayWhat = function(){
- return this.name + ":i`m a girl!";
- }
- function SubClass(){
- this.subname = "your sister";
- }
- SubClass.prototype = new SuperClass();
- SubClass.prototype = {//此处原型对象被覆盖,因为无法继承SuperClass属性和方法
- subSayWhat:function(){
- return this.subname + ":i`m a beautiful girl";
- }
- }
- var sub = new SubClass();
- console.log(sub.sayWhat());//TypeError: undefined is not a function
- function SuperClass(){
- this.name = "women";
- this.bra = ["a","b"];
- }
- function SubClass(){
- this.subname = "your sister";
- }
- SubClass.prototype = new SuperClass();
- var sub1 = new SubClass();
- sub1.name = "man";
- sub1.bra.push("c");
- console.log(sub1.name);//man
- console.log(sub1.bra);//["a","b","c"]
- var sub2 = new SubClass();
- console.log(sub1.name);//woman
- console.log(sub2.bra);//["a","b","c"]
如何解决实例共享的问题呢?我们接着往下看...
正如我们介绍过很少单独使用原型定义对象一样,在实际开发中我们也很少单独使用原型链,为了解决引用类型的共享问题,javascript 开发者们引入了经典继承的模式(也有人称为借用构造函数继承),它的实现很简单就是在子类型构造函数中调用超类型的构造函数。我们需要借助 javascript 提供的
或者
- call()
函数,我们看下示例:
- apply()
- function SuperClass() {
- this.name = "women";
- this.bra = ["a", "b"];
- }
- function SubClass() {
- this.subname = "your sister";
- //将SuperClass的作用域赋予当前构造函数,实现继承
- SuperClass.call(this);
- }
- var sub1 = new SubClass();
- sub1.bra.push("c");
- console.log(sub1.bra);//["a","b","c"]
- var sub2 = new SubClass();
- console.log(sub2.bra);//["a","b"]
这一句话的意思是在 SubClass 的实例(上下文)环境中调用了 SuperClass 构造函数的初始化工作,这样每一个实例就会有自己的一份 bra 属性的副本了,互不产生影响了。但是,这样的实现方式仍不是完美的,既然引入了构造函数,那么同样我们也面临着上篇中讲到的构造函数存在的问题:如果在构造函数中有方法的定义,那么对于没一个实例都存在一份单独的 Function 引用,我们的目的其实是想共用这个方法,而且我们在超类型原型中定义的方法,在子类型实例中是无法调用到的:
- SuperClass.call(this);
- function SuperClass() {
- this.name = "women";
- this.bra = ["a", "b"];
- }
- SuperClass.prototype.sayWhat = function(){
- console.log("hello");
- }
- function SubClass() {
- this.subname = "your sister";
- SuperClass.call(this);
- }
- var sub1 = new SubClass();
- console.log(sub1.sayWhat());//TypeError: undefined is not a function
如果你看过上篇文章关于原型对象和构造函数的,想必你已经知道解决这个问题的答案了,那就是沿用上篇的套路,使用 "组合拳"!
组合式继承就是结合原型链和构造函数的优势,发出各自特长,组合起来实现继承的一种方式,简单来说就是使用原型链继承属性和方法,使用借用构造函数来实现实例属性的继承,这样既解决了实例属性共享的问题,也让超类型的属性和方法得到继承:
- function SuperClass() {
- this.name = "women";
- this.bra = ["a", "b"];
- }
- SuperClass.prototype.sayWhat = function(){
- console.log("hello");
- }
- function SubClass() {
- this.subname = "your sister";
- SuperClass.call(this); //第二次调用SuperClass
- }
- SubClass.prototype = new SuperClass(); //第一次调用SuperClass
- var sub1 = new SubClass();
- console.log(sub1.sayWhat());//hello
组合继承的方式也是实际开发中我们最常用的实现继承的方式,到此已经可以满足你实际开发的需求了,但是人对完美的追求是无止境的,那么,必然会有人对这个模式 "吹毛求疵" 了:你这个模式调用了两次超类型的构造函数耶!两次耶。。。你造吗,这放大一百倍是多大的性能损失吗? 最有力的反驳莫过于拿出解决方案,好在开发者找到了解决这个问题的最优方案:
在介绍这个继承方式前,我们先了解下寄生构造函数的概念,寄生构造函数类似于前面提到的工厂模式,它的思想是定义一个公共函数,这个函数专门用来处理对象的创建,创建完成后返回这个对象,这个函数很像构造函数,但构造函数是没有返回值的:
- function Gf(name,bra){
- var obj = new Object();
- obj.name = name;
- obj.bra = bra;
- obj.sayWhat = function(){
- console.log(this.name);
- }
- return obj;
- }
- var gf1 = new Gf("bingbing","c++");
- console.log(gf1.sayWhat());//bingbing
寄生式继承的实现和寄生式构造函数类似,创建一个不依赖于具体类型的 "工厂" 函数,专门来处理对象的继承过程,然后返回继承后的对象实例,幸运的是这个不需要我们自己实现,道哥(道格拉斯)早已为我们提供了一种实现方式:
- function object(obj) {
- function F() {}
- F.prototype = obj;
- return new F();
- }
- var superClass = {
- name:"bingbing",
- bra:"c++"
- }
- var subClass = object(superClass);
- console.log(subClass.name);//bingbing
在公共函数中提供了一个简单的构造函数,然后将传进来对象的实例赋予构造函数的原型对象,最后返回该构造函数的实例,很简单,但疗效很好,不是吗?这个方式被后人称为 "原型式继承",而寄生式继承正是在原型式基础上,通过增强对象的自定义属性实现的:
- function buildObj(obj){
- var o = object(obj);
- o.sayWhat = function(){
- console.log("hello");
- }
- return o;
- }
- var superClass = {
- name:"bingbing",
- bra:"c++"
- }
- var gf = buildObj(superClass);
- gf.sayWhat();//hello
寄生式继承方式同样面临着原型中函数复用的问题,于是,人们又开始拼起了积木,诞生了——寄生组合式继承,目的是解决在指定子类型原型时调用父类型构造函数的问题,同时,达到函数的最大化复用。基于以上基础实现方式如下:
- //参数为两个构造函数
- function inheritObj(sub,sup){
- //实现实例继承,获取超类型的一个副本
- var proto = object(sup.prototype);
- //重新指定proto实例的constructor属性
- proto.constructor = sub;
- //将创建的对象赋值给子类型的原型
- sub.prototype = proto;
- }
- function SuperClass() {
- this.name = "women";
- this.bra = ["a", "b"];
- }
- SuperClass.prototype.sayWhat = function() {
- console.log("hello");
- }
- function SubClass() {
- this.subname = "your sister";
- SuperClass.call(this);
- }
- inheritObj(SubClass,SuperClass);
- var sub1 = new SubClass();
- console.log(sub1.sayWhat()); //hello
这个实现方式避免了超类型的两次调用,而且也省掉了 SubClass.prototype 上不必要的属性,同时还保持了原型链,到此真正的结束了继承之旅,这个实现方式也成为了最理想的继承实现方式!人们对于 javascript 的继承的争议还在继续,有人提倡 OO,有人反对在 javascript 做多余的努力去实现 OO 的特性,管他呢,至少又深入了解了些!
转自:https://segmentfault.com/a/1190000000612902
来源: http://www.bubuko.com/infodetail-1964968.html