js的对象继承的讲解

最新推荐文章于 2025-08-19 17:04:17 发布

转载最新推荐文章于 2025-08-19 17:04:17 发布 · 632 阅读

JavaScript 专栏收录该内容

311 篇文章

订阅专栏

本文介绍了JavaScript中多种实现继承的方法，包括对象冒充、使用call和apply方法、原型链继承及结合构造函数与原型链的复合继承等。每种方法都通过实例进行了详细解释。

原文出处：http://www.2cto.com/kf/201208/148873.html

//javascript中的继承--第一种继承方式：对象冒充
function Parent(name)
{
 this.name = name;
 this.getInfo = function()
 {
 document.write("父亲的名字是："+ name +" ");
 }
}
function Child(name, age)
{
 //这是继承父类的最重要的三行代码
 this.mehod = Parent;//这句代码是将Parent这个对象赋给this.method,即继承父类的属性和方法过来了。
 this.mehod(name);//这句代码是初始化父类的一个属性
 delete this.method;//删除,因为menthod已没有作用了

 this.age = age;
 this.getChildInfo = function()
 {
 document.write("儿子的名字是："+this.name +" , 年龄是："+this.age);
 }
}

var parent = new Parent("爸爸");
//parent.getInfo();
var child = new Child("儿子",24);
//child.getInfo();
//child.getChildInfo();

//call方法是属于每一个Function的一个方法，因此我们定义的每一个函数都有此方法，call方法的第一个参数是要传递给this的，后面的参数一次传递给函数中的参数
function Test(name, age)
{
   this.name = name;
   this.age = age;

   this.getInfo = function()
   {
    document.write("name:"+this.name+" , age:"+this.age);
   }
}
var obj1 = new Object();
obj1.sex = "男";
obj1.get = function()
{
   document.write("name:"+this.name+" age:"+this.age+" sex"+this.sex);
}
//text.call的调用相当于test的调用
//注意：相当于obj1继承了test函数，继承了它的属性和方法。
Test.call(obj1,"曹欢",21);
alert(obj1.name);
obj1.getInfo();
obj1.get();

//call方法实现继承
/*function Parent(name)
{
 this.name = name;
 this.getParentInfo = function()
 {
 document.write("name:"+this.name+" ");
 }
}

function Child(password)
{
 Parent.call(this,"曹欢");
 this.password = password;
 this.getChildInfo = function()
 {
 document.write("name:"+this.name+",password:"+this.password+" ");
 }
}

var p = new Parent("a");
//p.getParentInfo();
var c = new Child("123456");
//c.getParentInfo();
//c.getChildInfo();

//对象继承的第三种方法apply与call用法基本一致
function Parent(name)
{
 this.name = name;
 this.getInfo = function()
 {
 document.write("name:"+this.name," ");
 }
}

function Child(password)
{
 Parent.apply(this,["曹欢"]);//与call的区别，就是从第二个参数开始传递的是一个数组，而call传递的是一个个的参数
 this.password = password;
 this.getChildInfo = function()
 {
 document.write("name:"+this.name+" , password:"+this.password," ");
 }
}

var p = new Parent("a");
//p.getInfo();
var c = new Child("密码");
//c.getInfo();
//c.getChildInfo();

//原型链的方式实现继承,缺陷是无法给构造函数传递参数。
function ParentPrototype(){}
ParentPrototype.prototype.name = "张三";
ParentPrototype.prototype.getInfo = function()
{
 document.write("name:"+this.name+" ");
}
function ChildPrototype(){};
//集成的关键就是这句代码
ChildPrototype.prototype = new ParentPrototype();
ChildPrototype.prototype.password = "密码";
ChildPrototype.prototype.getAllInfo = function()
{
alert("asd");
 document.write("name:"+this.name+", password:"+this.password);
}

var child = new ChildPrototype();*/
//child.getInfo();
//child.getAllInfo();
//可以传递参数的原型链继承方法(复合):推荐使用该方法

function ParentFh(name)
{
 this.name = name;
}
ParentFh.prototype.getInfo = function()
{
 document.write("name:"+this.name," ");
}

function ChildFh(name, password)
{
 this.password = password;
 ParentFh.call(this,name);
}
ChildFh.prototype = new ParentFh();
ChildFh.prototype.getAllInfo = function()
{
 document.write("name:"+this.name+" , password:"+this.password);
}
var parentFh = new ParentFh("曹欢");
parentFh.getInfo();
var childFh = new ChildFh("曹娟","密码");
childFh.getAllInfo();