JavaScript继承知识

本文介绍了JavaScript的继承方式,包括原型链实现继承、借用构造函数、组合继承,分析了各方式的原理、优势与问题。还阐述了继承中识别属性存在位置(实例或原型)的方法,如hasOwnProperty()等,以及确定原型和实例关系的方式,如instanceof操作符等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 原型链实现继承

    原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。实现原型链有一种基本模式,其代码大致如下:

	function SuperType(){
		this.property = true;
	}

	SuperType.prototype.getSuperValue = function(){
		return this.property;
	};

	function SubType(){
		this.subproperty = false;
	}
	//继承了SuperType
	SubType.prototype = new SuperType();//SubType原型对象等于另一个类型SuperType的实例

	SubType.prototype.getSubValue = function (){
		return this.subproperty;
	}

	var instance = new SubType();
	alert(instance.getSuperValue());      //true

    实现的本质:重写原型对象,代之以一个新类型的实例。其中getSuperValue()方法仍然还在SuperType.prototype中,但property则位于SubType.prototype中。这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property就存在该实例中。
    提醒点:1 谨慎定义方法:给原型添加方法的代码一定要放在替换原型的语句之后。2 通过原型链实现继承时,不能使用对象字面量创建原型方法。
    原型的问题:实践中很少会单独使用原型链
    1 最主要问题来自包含引用类型值的原型,包含引用类型值的原型属性会被所有实例共享
    2 在创建子类型实例时,不能向超类型的构造函数中传递参数

2 借用构造函数

    在解决原型问题1,开发人员使用一种借用构造函数(constructor stealing)的技术。基本思想即在子类型构造函数的内部调用构造函数。相对于原型链,借用构造函数有一个很大优势,即可以在子类型构造函数中向超类型构造函数传递参数。
    存在的问题是:无法避免构造函数模式的问题,方法都在构造函数中定义,因此函数复用就没了。在超类型的原型中定义的方法,对子类型而言是不可见的,结果所有类型都只能使用构造函数模式。从而很少单独使用。

3 组合继承

    combination inneritance,也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合。成为JavaScript中最常用的继承模式。

    //SuperType 构造函数定义name和colors两个属性
	function SuperType(name){
		this.name = name;
		this.colors = ["red", "blue", "green"]
	}

    //SuperType 的原型定义sayName()方法
	SuperType.prototype.sayName = function(){
		alert(this.name);
	};
    
    //SubType 构造函数在调用 SuperType 构造函数(传入 name 参数),定义自己的age属性
	function SubType(name, age){
		//继承属性
		SuperType.call(this, name);

		this.age = age;
	}
	
    //继承方法
	SubType.prototype = new SuperType();//1将SuperType的实例赋值给SubType的原型
	SubType.prototype.constructor = subType;
	SubType.prototype.sayAge = function(){//2 在新原型上定义了sayAge()方法
		alert(this.age);
	}

    //instance1、instance2拥有自己的属性,使用相同的sayName()和sayAge()方法
	var instance1 = new SubType("Nicholas", 29);
	instance1.colors.push("white");
	alert(instance1.colors);        //"red,blue,green,white"
	instance1.sayName();            //"Nicholas"
	instance1.sayAge();             //29

	var instance2 = new SubType("Greg", 27);//
	alert(instance2.colors);        //"red,blue,green"
	instance2.sayName();
	instance2.sayAge();

4 继承中识别属性、确定原型和实例关系

4.1 判断属性存在对象实例还是原型中方法

    当为对象实例添加一个属性时,这个属性会屏蔽原型对象中保存的同名属性。区别方式:

    (1)采用hasOwnProperty()方法可以检测一个属性是存在实例中,还是存在原型中。只在给定属性存在于对象实例中时,才会返回true。

    (2)同时使用hasOwnProperty()和in操作符,明确属性存在对象还是原型中。

    //确定属性是原型中的属性
	function hasPrototypeProperty(object, name){
		return !object.hasOwnProperty(name) && (name in object);
	}

	var person = new Person();
	alert(hasPrototypeProperty(person, name)); //true

	person.name = "Greg";
	alert(hasPrototypeProperty(person, name)); //false

4.2 确定原型和实例的关系

    在JavaScript面向对象程序设计时,在原型链实现中,确定其与原型对象关系的方式有两种方式,同样可以识别基于组合继承创建的对象:

    (1)使用instanceof操作符

        只要用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回true

    (2)使用isPrototypeOf()方法

        只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。

    alert(instance1 instanceof Object);      //true
    alert(instance1 instanceof SuperType);   //true
    alert(instance1 instanceof SubType);     //true

    alert(Object.prototype.isPrototypeOf(instance1));    //true
    alert(SuperType.prototype.isPrototypeOf(instance1)); //true
    alert(SubType.prototype.isPrototypeOf(instance1));   //true

参考文献:NicholasC.Zakas. JavaScript高级程序设计[M]. 2012.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值