JS继承类相关试题

题目一:

//有关于原型继承的代码如下:
function Person(name) {
   this.name = name;
}
Person.prototype = {
     getName : function() {
    return this.name;
    }
}
function Student(name, id) {
     Person.call(this, name)
    this.id = id;
}

//接下来的一行,我们提供了有三种写法:
//第一种:Student.prototype = Person.prototype;
//第二种:Student.prototype = new Person();
//第三种:Student.prototype = Object.create(Person.prototype);
         Student.prototype.getId = function() {
             return this.id;
         }
//请问:
//1.请简述代码中注释处的三种写法的每一种,是否正确,是否完美.如果都不够完美,那你应该如何写.
//2.除了注释处,代码的其他部分还有值得优化的地方么.

My Answer:

1.这三种写法,写法一是错误的,写法二三是正确的。

对于写法一,只是把Person的原型对象赋值给了Student的原型对象,这样子虽然Student的实例中可以访问到Person的原型上的属性和方法,但是对于不是绑定在原型上的属性,例如Person中的this.name,实例中是不会有这个属性的。所以这并不是继承。只是简单的引用,因为Person.prototype是一个对象,也是引用类型,这样的赋值只是把Person.prototype的引用赋值给了Student.prototype。既然是引用,那两者如果有一方发生改动,另一方必然会受影响。这样new出来的实例之间也是互相影响的。

对于写法二,确实是正确的写法,这种写法就是组合继承,但是不是完美的写法。因为创建实例的过程中两次调用了父类的构造函数。

对于写法三,也是正确的写法,这种写法就是寄生式继承。但是不是完美的写法。首先,ES3中没有Object.create()方法,没有做兼容。然后,这种继承如果父类中含有引用类型,如数组,那么继承之后,各个实例中的这个引用类型会互相影响。

相对更完美的写法:

function inheritPrototype(SubType,SuperType){
   var prototype;
   if(typeof Object.create===‘function‘){
       prototype=Object.create(SuperType.prototype);
   }else{
       funciont W(){};
       W.prototype=SuperType.prototype;
       prototype=new W();
   }
       prototype.constructor=SubType;       Student.prototype=prototype;
}inheritPrototype(Student,Person);

题目二,感觉给出了写法就是可以用来回答题目二的了。不过,还要优化的话,我想应该是这里

Person.prototype = {
     getName : function() {
    return this.name;
    }
}

这里重新定义了原型对象,覆盖了原来的constructor属性,可以把它定义回去。就是这样

Person.prototype = {
     constructor:Person,
     getName : function() {
    return this.name;
    }
}

  

  

时间: 2024-08-11 09:55:02

JS继承类相关试题的相关文章

JS 继承(类式 与 原型式)

1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Person.prototype.getName = function() { return this.name;}//实例化这个超var a = new Person('Darren1')console.log(a.getName());//Darren1 //再声明类 function Program

关于原生JS获取类相关的代码

<script> var FungetElementsByClassName = function(str,root,tag){ if(root){ root = typeof root == "string" ? document.getElementById(root) : root; } else { root = document.body; } tag = tag || "*"; var els = root.getElementsByTagN

js模拟类的创建以及继承

<html> <body> <script>    //js模拟类的创建以及继承        //第一步:创建父类        function Parent(name){            this.name = name;        }        //给父类添加属性方法        Parent.prototype.age = 18;        //var p1 = new Parent();    //第二步:创建子类            

JS继承的几种方式

JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 既然要实现继承,那么我们先定义一个父类: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ alert(this.name + '正在睡觉!'); } } // 原型方法 Animal.prototype.eat = function(food) { alert(this.na

js继承的常用方式

写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的. 我们都知道面向对象语言的三大特征:继承.封装.多态,但JavaScript不是真正的面向对象,它只是基于面向对象,所以会有自己独特的地方.这里就说说JavaScript的继承是如何实现的. 学习过Java和c++的都知道,它们的继承通过类实现,但JavaScript没有类这个概念,那它通过什么机

JS继承的实现方式

前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal

js继承的概念

js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来创建一个自定义对象.然而js中所有事物都是对象,那么用什么办法来创建自定义对象呢?这就需要用到js的原型: 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(protot

原生js之道——原生js编写类选择器

一.类选择器的概念 类选择器,就是通过class属性获取节点.比如一个html结构中,有三个p标签都具有class="red"的属性,那么类选择器返回的就是这三个p标签. 在jquery中,我们可以很方便的通过$(".red")这种方式按照类获取节点.但是在原生的javascript中,有getElementById(按照id属性获取元素).getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法.因此,编写原生js实现类选择

js继承的实现

js继承有5种实现方式: 1.继承第一种方式:对象冒充   function Parent(username){     this.username = username;     this.hello = function(){       alert(this.username);     }   }   function Child(username,password){     //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承     //第一步:this.