javascript中原型链存在的问题

我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子。

function A () {
   this.abc = 44;
}
A.prototype.getAbc = function (){
  return this.abc;
};
function B() {
}
B.prototype = new A();          // B通过A的实例完成了继承,形成了原型链(B的原型就是A的实例)
var b = new B();
b.getAbc();

关系如下:b(实例) ->B.prototype = new A() -> A.prototype ->Object.prototype

可是在这种看似“漂亮”的继承方法中确存在问题。

1. 最主要的问题来自包含引用类型值的原型,我们知道共享原型是存在问题的,抛出一个例子

function Person () {
}
Person.prototype = {
    friends = ["a","b"];
}
var person1 = new Person();
var person2 = new Person();

person1.friends.push("c");
console.log(person1.friends);  // "a","b","c"
console.log(person2.friends);  //"a","b","c"

通过引用实例改变了原型中本来中的值,同时也影响了其他实例。(这就是为什么引用类型值要定义在构造函数中而非原型中的原因)

在原型链中同样也会有同样的情况出现:

function A () {
  this.numbers = [1,2,3];
}
function B() {
}
B.prototype = new A();
var b = new B();
var a = new A();

b.numbers.push(4);
b.numbers;             //1234
var b2 = new B();
b2.numbers;           //1234

a.numbers;             //123

我们看到出现了和上面一样的情况(在通过原型来继承时,原型实际上会变成另一个类型的实例。于是原先的实例属性也就顺理成章的变成了现在原型属性了)。

可是我们看到A的实例a.numbers;依然是123,说明在B继承A的实例时是复制了A实例中的所有属性(包括prototype指针,形成原型链)并非引用(其实这里有疑问,是因为继承的是A()的实例所以才不会影响A()创建其他实例的表现吗?)。

2.在创建子类实例时,不可以在不影响所有对象实例的情况下给超类传递参数。

  function  A (light) {
        this.light1 = light;
    };
  function  B (light) {
        this.light = light;
    };
    //给B赋值的同时,想给A赋值,无法实现
    B.prototype = new A();
    var C = new B(123);
    console.log(C.light);
    console.log(C.light1);

想实现这个需要手动调用A的构造函数,会影响其他实例

 function A (light) {
        this.light1 = light;
    };
 function B (light) {
        this.light = light;
        A.call(this,light);//手动调用A的构造方法
    };
    //给B赋值的同时,给A赋值
    B.prototype = new A();
    var C = new B(123);
    console.log(C.light);
    console.log(C.light1);
时间: 2024-08-01 07:57:46

javascript中原型链存在的问题的相关文章

javascript中原型链与instanceof 原理

instanceof:用来判断实例是否是属于某个对象,这个判断依据是什么呢? 首先,了解一下javascript中的原型继承的基础知识: javascript中的对象都有一个__proto__属性,这个是对象的隐式原型,指向该对象的原型对象.显式的原型对象使用prototype,但是Object.prototype.__proto__=null; 判断某个对象a是否属于某个类A的实例,可以通过搜索原型链. //继承机制 function A(){ } A.prototype.name='licu

JavaScript中原型链的那些事

引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以ECMAScript无法实现接口继承,只能实现实现继承.那么是怎么实现实现继承的呢??这就要说一说JS中的原型链了. 原型链的定义 什么是原型链?这个问题很简单,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法. 我们先来回顾一下构造函数,原型,实例之间的关系.每一个构造函数都有一个原

Javascript的原型链图

90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个__proto__ constructor .prototype 都是内部对象 这样画是为了简洁 举个例子 如果考虑__proto__ 作为内部对象 上图变为 原型链就是 constructor 和 prototype如果作为内部对象 放到相应的位置 图就变大麻团了 保证晕倒什么也记不住 不服请看 这

javascript中原型,构造器,还有E5扩展的默认成员

对象原型所具有的基本特征:1.toString() 2.toLocaleString() 3.valueOf() 4.constructor() 5.propertyIsnumerable() 6.hasOwnProperty() 7.isPrototypeOf()构造器所具有的特殊成员1.call() 2.apply() 3.caller() 4.bind() 5.arguments [object] 6.length [number] 7.prototype [objcet] E5对于Obj

对Javascript中原型的深入理解

  理解原型对象 在Javascript中无论什么时候,只要创建一个新的函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法).如果按照字面上的意思来理解,那么原型属性就是通过调用构造函数而创建的那个对象的实例的原型对象. 在默认的情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针.如下图 function P

javascript中原型(prototype)与原型链

javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有class保留字,但不能用作变量名 原型:Javascript中的每一个对象都有一个内部私有的连接指向另一个对象,这个对象就是原对象的原型 注意:原型是一个对象,其他对象可以通过他实现属性继承 原型链:这个原型对象也有自己的原型,直到对象的原型为null为止(也就是没有原型),这种一级一级的链结构就称为

JavaScript中原型对象的彻底理解

一.什么是原型 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承. 1.1 函数的原型对象 ? 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即:prototype的属性的值是这个对象 ).这个对象B就是函数A的原型对象,简称函数的原型.这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说:c

深入浅出JavaScript之原型链&继承

Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 这部分知识也是JavaScript里的核心重点之一,同时也是一个难点.我把学习笔记整理了一下,方便大家学习,同时自己也加深印象.这部分代码的细节很多,需要反复推敲.那我们就开始吧. 小试身手 原型链

JavaScript函数原型链知识记录

1 构造函数 构造函数是专门用于创建对象的 function Person(myName, myAge) { // let obj = new Object(); // 系统自动添加的 // let this = obj; // 系统自动添加的 this.name = myName; this.age = myAge; this.say = function () { console.log("hello world"); } // return this; // 系统自动添加的 }