js的对象继承的讲解

原文出处：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();

js的对象继承的讲解相关推荐

JS 中对象的简单创建和继承
对象的简单创建 1.通过对象直接量创建比如 var obj = {}; 2.通过new 创建比如 var obj = new Object(); // 相当于var obj = {}; var a ...
JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
详解js中的继承（一）
详解js中的继承(一) 前言准备知识 1.构造函数,实例 2.原型对象 3.构造函数,原型对象和实例的关系继承原型链小结前言通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我 ...
html制作统计期末成绩,JS-结合html综合练习js的对象——班级成绩表制作
对象综合练习 body { font: 14px "微软雅黑"; } span { padding: 5px; } table { margin: 0 auto; border: ...
js map对象遍历_何时使用 Map 来代替变通的 JS 对象
JS 普通对象 {key: 'value'} 用于存放结构化数据.但有一件事我觉得很烦:对象键必须是字符串(或很少使用的 symbol). 如果将数字用作键会怎样?在这种情况下不会有错误: const ...
Node.js自定义对象事件监听与发射
一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...
7、JS面向对象编程之继承
Javascript本身是从Perl语言的语法演变而来的,本质上是脚本语言,随着版本的更新逐渐加入的对面向对象的模拟.我认为Js的面向对象模拟总体上做得还是不错的,因为我们不能盲从任何一种理念,不能纯 ...
js自定义对象 (转)
原文地址:https://sjolzy.cn/js-custom-object.html 29 March 2010 9:53 Monday by 小屋 javascript进阶之对象篇一,概述在 ...
js 数组对象的操作方法
js 数组对象的操作方法在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行, ...

js的对象继承的讲解

js的对象继承的讲解相关推荐

最新文章

热门文章