JS原型继承

JS的面向对象写法

function worker(name, age){
    this.name = name;
    this.age = age;
    this.isWorking = false;
}
worker.prototype.startWork = function(){
    if(this.isWorking) return;
    this.isWorking = true;
};

//在此处尝试定义一个endWork方法

var tom = new worker("tom", 40);
var jim = new worker("jim",20);

var html = "tom和jim两个实例的startWork方法是否共用内存 : " + (tom.startWork == jim.startWork).toString();
document.write(html);

对象的继承

jQuery提供了对原始对象的简单继承方法:$.extend,它会使用后面的对象与前面的对象的成员加起来,成生新的对象。

var obj1 = {
    name : "obj1",
    age : 30
};
var obj2 = $.extend(obj1,{
    age : 20,
    sayHello : function(){
        document.write("hello!<br/>");
    }
});

document.write(obj2.age + "<br/>");
obj2.sayHello();

上面obj1是通过{}写法来构造父类对象的,但是如果obj1是通过function这种方式来构造对象是无法使用$.extend去做继承的。

调用父类的构造函数

function leader(name,age){
    worker.apply(this,arguments);
}
  • apply这是JavaScript内置的一个方法,只要是声明成为function的对象,都会拥有该成员.
  • arguments这个关键字只能在function内部使用,表示的是参数列表,在上述示例中arguments中包含的就是name和age。
  • 通过worker.apply(this,arguments),相当于使用当前实例和当前参数列表执行了一次worker方法,也就意味着将当前实例和name,age进行了一次worker的构造。

直接继承成员

光调用了父类型的构造函数,但是其原型中的成员依然没有建立在当前类型中。
我们可以通过直接引用的方法得到父类型中的所有成员:

leader.prototype = worker.prototype;
var Green = new leader("Green",50);
Green.startWork();

通过直接引用的方法,leader得到了worker中的所有成员.

直接继承的缺陷

直接继承并不是继承,而是直接引用,两者拥有相同的原型,一方的修改都会使另一方发生变化。

优化的继承方法

直接继承中,子类型对父类方法的修改,因为有一个直接引用的关系,子类型的修改会对父类型造成影响。因此,通过直接把父类型原型赋值给子类型原型的方法去做继承,是不合适的。
下面,我们采用副本的方式去做继承:

leader.prototype = new worker();
leader.prototype.startWork = function(){
    //some code here;
};

var w = new worker("",0);
var l = new leader("",0);
document.write(w.startWork == l.startWork);    //false
时间: 2024-09-20 01:10:00

JS原型继承的相关文章

js原型继承的两种方法对比介绍

这篇文章主要介绍了js原型继承的两种方法对比介绍,需要的朋友可以参考下 在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类.   而在继承的时候有两种常用方式,今天我们就来稍作探讨    代码如下: //父类  function Person(name){     this.name = name; };    // 子类  function Student(sex){   Perso

浅析JS原型继承与类的继承_基础知识

我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承</title> </head> <body> /* -- 类式继承 -- */ <script type="text/javascript"> //先声明一个超类 var Animal = function

关于JS原型继承的问题

问题描述 function Polygon() { Polygon.prototype.getArea = function () { return 0; } } function Triangle() { Triangle.prototype = new Polygon(); } var triangle = new Triangle(); alert(triangle.getArea()); var triangle1 = new Triangle(); alert(triangle1.ge

JS原型继承和类式继承

类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的.特别是当我们是用new 关键字的时候,就使得"类"的概念就越像其他语言中的类了.类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性.call和apply方法为类式继承提供了支持.通过改变this的作用环境,使得子类本身具有父类的各种属性.   var father = function() { this.age = 52; this.say = function() { alert('hell

关于js原型继承理解详解

基本形式 我们先来看下面一段代码:  代码如下 复制代码 //构造器函数 function Shape(){ this.x = 0; this.y = 0; } //一个shape实例 var s = new Shape(); 虽然这个例子非常简单,但是有四个"非常重要"的点需要在此阐明: 1.s是一个对象,并且默认的它拥有访问Shape.prototype(即每个由Shape构造函数创建的对象拥有的原型)的权限:简单来说,Shape.prototype就是一个"监视&quo

js原型继承的两种方法对比介绍_基础知识

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类. 而在继承的时候有两种常用方式,今天我们就来稍作探讨 复制代码 代码如下: //父类 function Person(name){    this.name = name;};  // 子类 function Student(sex){  Person.apply(this,arguments); //继承父类的构造函数  this.

浅谈js原型链与继承

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解.       首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通 过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数 foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例

javascript原型继承工作原理和实例详解_javascript技巧

先为大家分享JS原型继承实例,供大家参考,具体内容如下 一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body> <!--原型继承--> <script type="text/javascript"> //cl

js原型链与继承解析(初体验)_javascript技巧

首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍). function foo(){} fo