JS原型继承

简介: JS的面向对象写法function worker(name, age){ this.name = name; this.age = age; this.

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
目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
32 1
JavaScript中的原型 保姆级文章一文搞懂
|
4月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
34 0
|
1月前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
1月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
1月前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
32 1
|
3月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
3月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
3月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
3月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
24 1