js中对象的继承

1.js中继承的几种用法总结

一,js中对象继承js中有三种继承方式1.js原型(prototype)实现继承复制代码 代码如下: <body> 2.构造函数实现继承复制代码 代码如下: <body> 3.call , apply实现继承复制代码 代码如下: <body> 二、call和apply的用法(详细介绍)js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])。

JS手册中对call的解释:复制代码 代码如下:call 方法 调用一个对象的一个方法,以另一个对象替换当前对象。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项。

将被用作当前对象的对象。 arg1, arg2, , argN 可选项。

将被传递方法参数序列。 说明 call 方法可以用来代替另一个对象调用一个方法。

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

说简单一点,这两函数的作用其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

下面以apply为例,说说这两个函数在 js中的重要作用。如:复制代码 代码如下: function Person(name,age){ //定义一个类this.name=name; //名字this.age=age; //年龄this.sayhello=function(){alert(this.name)};}function Print(){ //显示类的属性this.funcName="Print";this.show=function(){var msg=[];for(var key in this){if(typeof(this[key])!="function"){msg.push([key,":",this[key]].join(""));}}alert(msg.join(" "));};}function Student(name,age,grade,school){ //学生类Person.apply(this,arguments);//比call优越的地方Print.apply(this,arguments);this.grade=grade; //年级this.school=school; //学校}var p1=new Person("卜开化",80);p1.sayhello();var s1=new Student("白云飞",40,9,"岳麓书院");s1.show();s1.sayhello();alert(s1.funcName); 另外,Function.apply()在提升程序性能方面有着突出的作用:我们先从Math.max()函数说起,Math.max后面可以接任意个参数,最后返回所有参数中的最大值。

比如复制代码 代码如下:alert(Math.max(5,8)); //8alert(Math.max(5,7,9,3,1,6)); //9 //但是在很多情况下,我们需要找出数组中最大的元素。 var arr=[5,7,9,1];//alert(Math.max(arr)); // 这样却是不行的。

NaN //要这样写function getMax(arr){var arrLen=arr.length;for(var i=0,ret=arr[0];i。

2.javascript面向对象中继承实现的几种方式

1、原型链继承核心: 将父类的实例作为子类的原型缺点: 父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了2、构造继承核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)缺点: 方法都在构造函数中定义, 只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能3、组合继承组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)4、寄生组合继承核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点缺点:堪称完美,但实现较为复杂。

3.JS如何创建对象和继承对象

//创建没有属性的对象

var empty = {};

//两个属性的对象

var point = {

x: 0,

y: 0

};

也可以new。

var arr=new Array();

继承的不能是对象,得是类。

// 定义一个动物类

function Animal (name) {

// 属性

this.name = name || 'Animal';

// 实例方法

this.sleep = function(){

console.log(this.name + '正在睡觉!');

}

}

// 原型方法

Animal.prototype.eat = function(food) {

console.log(this.name + '正在吃:' + food);

};

1、原型链继承

核心: 将父类的实例作为子类的原型

function Cat(){

}

Cat.prototype = new Animal();

Cat.prototype.name = 'cat';

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.eat('fish'));

console.log(cat.sleep());

console.log(cat instanceof Animal); //true

console.log(cat instanceof Cat); //true

4.JavaScript中继承应该怎么实现

1.原型链基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。原型链实现继承例子:function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//继承了SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true2.借用构造函数基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子:function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//继承了SuperType}var instance1 = new SubType();instance1.colors.push("black");console.log(instance1.colors);//"red","blue","green","black"var instance2 = new SubType();console.log(instance2.colors);//"red","blue","green"3.组合继承基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。例子:function SuperType(name) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name);}function SubType(name, age) {SuperType.call(this,name);//继承属性this.age = age;}//继承方法SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype;Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1.colors);//"red","blue","green","black"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20);console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//204.原型式继承基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

原型式继承的思想可用以下函数来说明:function object(o) {function F(){}F.prototype = o;return new F();}例子:var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push("Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends.push("Rob");var yetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"5.寄生式继承基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。

例子:function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hi");};return clone;}var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"hi"6.寄生组合式继承基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法其基本模型如下所示:function inheritProperty(subType, superType) {var prototype = object(superType.prototype);//创建对象prototype.constructor = subType;//增强对象subType.prototype = prototype;//指定对象}例子:function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);};function SubType(name,age){SuperType.call(this,name);this.age = age;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}。

5.js中继承的几种用法总结

一,js中对象继承js中有三种继承方式1.js原型(prototype)实现继承复制代码 代码如下: <body> 2.构造函数实现继承复制代码 代码如下: <body> 3.call , apply实现继承复制代码 代码如下: <body> 二、call和apply的用法(详细介绍)js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])。

JS手册中对call的解释:复制代码 代码如下:call 方法 调用一个对象的一个方法,以另一个对象替换当前对象。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项。

将被用作当前对象的对象。 arg1, arg2, , argN 可选项。

将被传递方法参数序列。 说明 call 方法可以用来代替另一个对象调用一个方法。

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

说简单一点,这两函数的作用其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

下面以apply为例,说说这两个函数在 js中的重要作用。如:复制代码 代码如下: function Person(name,age){ //定义一个类this.name=name; //名字this.age=age; //年龄this.sayhello=function(){alert(this.name)};}function Print(){ //显示类的属性this.funcName="Print";this.show=function(){var msg=[];for(var key in this){if(typeof(this[key])!="function"){msg.push([key,":",this[key]].join(""));}}alert(msg.join(" "));};}function Student(name,age,grade,school){ //学生类Person.apply(this,arguments);//比call优越的地方Print.apply(this,arguments);this.grade=grade; //年级this.school=school; //学校}var p1=new Person("卜开化",80);p1.sayhello();var s1=new Student("白云飞",40,9,"岳麓书院");s1.show();s1.sayhello();alert(s1.funcName); 另外。

6.js对象是怎样继承另一个对象的

这几个连接不错,给你分享一下:

第二个:/blog/119815。

原理很简单:总结就是利用对象冒充机制的call方法把父类的属性给抓取下来,而成员方法尽量写进被所有对象实例共享的prototype域中,以防止方法副本重复创建。然后子类继承父类prototype域来抓取下来所有的方法。如想彻底理清这些调用链的关系,推荐大家多关注Js中prototype的constructor和对象的constructor属性,

7.js实现的几种继承方式

Js的继承方式有以下方式: // 定义一个动物类为父类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); }}// 原型方法Animal.prototype.eat = function(food) { console.log(this.name + '正在吃:' + food);};1、原型链继承核心: 将父类的实例作为子类的原型function Cat(){ }Cat.prototype = new Animal();Cat.prototype.name = 'cat';// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.eat('fish'));console.log(cat.sleep());console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //true特点:非常纯粹的继承关系,实例是子类的实例,也是父类的实例父类新增原型方法/原型属性,子类都能访问到简单,易于实现缺点:在Cat构造函数中,为Cat实例增加实例属性。

如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行。无法实现多继承来自原型对象的引用属性是所有实例共享的(详细请看附录代码: 示例1)创建子类实例时,无法向父类构造函数传参推荐指数:★★(3、4两大致命缺陷)2、构造继承核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)function Cat(name){ Animal.call(this); this.name = name || 'Tom';}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true特点:解决了1中,子类实例共享父类引用属性的问题创建子类实例时,可以向父类传递参数可以实现多继承(call多个父类对象)缺点:实例并不是父类的实例,只是子类的实例只能继承父类的实例属性和方法,不能继承原型属性/方法无法实现函数复用,每个子类都有父类实例函数的副本,影响性能推荐指数:★★(缺点3)3、实例继承核心:为父类实例添加新特性,作为子类实例返回function Cat(name){ var instance = new Animal(); instance.name = name || 'Tom'; return instance;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // false特点:不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果缺点:实例是父类的实例,不是子类的实例不支持多继承推荐指数:★★4、拷贝继承function Cat(name){ var animal = new Animal(); for(var p in animal){ Cat.prototype[p] = animal[p]; } Cat.prototype.name = name || 'Tom';}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true特点:支持多继承缺点:效率较低,内存占用高(因为要拷贝父类的属性)无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)推荐指数:★(缺点1)5、组合继承核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用function Cat(name){ Animal.call(this); this.name = name || 'Tom';}Cat.prototype = new Animal();// 组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // true特点:弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法既是子类的实例,也是父类的实例不存在引用属性共享问题可传参函数可复用缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)推荐指数:★★★★(仅仅多消耗了一点内存)6、寄生组合继承核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点function Cat(name){ Animal.call(this); this.name = name || 'Tom';}(function(){ // 创建一个没有实例方法的类 var Super = function(){}; Super.prototype = Animal.prototype; //将实例作为子类的原型 Cat.prototype = new Super();})();// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); //true//该实现没有修复constructor。Cat.prototype.constructor = Cat; // 需要修复下构造函数特点:堪称完美缺点:实现较为复杂推荐指数:★★★★(实现复杂,扣掉一颗星)示例代码:function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } //实例引用属性 this.features = [];}function Cat(name){}Cat.prototype = new Animal();var tom = new Cat('Tom');var kissy = new Cat('Kissy');console.log(tom.name); // "Animal"console.log(kissy.name); // "Animal"console.log(tom.features); // []console.log(kissy.features); // []tom.name = 'Tom-New Name';tom.features.push('eat');//针对。

8.js继承的几种方式 各

js继承用的还是比较少的,一般通过原型链继承或混合继承目的就是降低创建对象的开销! 各种继承示例如下: 构造函数继承: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 原型链继承: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 混合继承: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ES6 extends继承: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20。

9.javascript 是如何体现继承的

js由于是prototype的对象模型,没有严格意义上的类class。

全部都是对象Object要实现继承,可以先//创建一个父对象OldObject=function(){ this.a="属性1"};//复制出一个新对象,新对象里面已经具有旧对象的内容NewObject=new OldObject();//新增些内容,扩展新对象NewObject.b="属性2";NewObject.func=function(){ //新方法1}//新对象具有旧对象的属性alert(NewObject.a); 加分加分============================Ext js倒是可以实现面向对象,可以去参看下这个。

js中对象的继承

转载请注明出处JS代码网 » js中对象的继承

资讯

js循环里面定义的变量赋值

阅读(6)

本文主要为您介绍js循环里面定义的变量赋值,内容包括怎么在js里给变量赋值,JS中如何把String[]循环赋值给一个变量,JS中如何把String[]循环赋值给一个变量。<script language="javascript"><br>var a = new Array();//初始化数组<br>a[0

资讯

js获取src的浏览器兼容

阅读(6)

本文主要为您介绍js获取src的浏览器兼容,内容包括求个js的兼容问题关于对iframe的src获取的,在jsp页面,日期选择框,如何写一个网页的javascript判断浏览器的代码E浏览器下可。做这个用控件吧,好做下载My97DatePicker4.8Beta3http://www.my97

资讯

js获得昨天的日期

阅读(8)

本文主要为您介绍js获得昨天的日期,内容包括javascript中如何获取昨天的日期???,JS如何利用当前时间来获取昨天的时间,JS如何利用当前时间来获取昨天的时间。Date 对象 启用基本存储器并取得日期和时间。 dateObj = new Date() dateObj = n

资讯

js中return和不return的区别

阅读(6)

本文主要为您介绍js中return和不return的区别,内容包括关于js中return的用法有一点不懂,求解,return的用法(在js中),大师们,js有的时候调用加return有的时候不加这是怎么个区别法搜。首先,一旦执行了return语句就会对function进行返回值返回

资讯

js清空所有input的值

阅读(6)

本文主要为您介绍js清空所有input的值,内容包括js怎么清空inputfile里的值?,如何清空一个div里面所有input框的值,怎么用简单的JavaScript清空一个div中所有input中的内容?。html:<input type="file" value="选择文件" id="fileInput" /><button

资讯

手机中的JS文件是什么

阅读(6)

本文主要为您介绍手机中的JS文件是什么,内容包括手机上的JavaScript什什么意思?,我的世界手机版js是什么js怎么用,在手机行业中,js是什么意思?。Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语

资讯

js获取的总时间长

阅读(8)

本文主要为您介绍js获取的总时间长,内容包括如何用JS获取audio标签的已播放时长并控制进度条的width?,用js如何获取mp3歌曲时间,JS实现获取服务器时间怎么写呢?。1. <audio id="audio" controls>。2. <source src="horse.ogg" type="audi

资讯

js和jsp中变量的值

阅读(7)

本文主要为您介绍js和jsp中变量的值,内容包括从js文件里拿jsp文件中javascript变量的值,javascript中的变量与jsp页面的传值怎么做?,jsp中如何取javascript中变量的值。js与java是不同语言,运行在不同环境下,因此无法直接获得对方数据。java

资讯

js怎么获取a标签的id

阅读(4)

本文主要为您介绍js怎么获取a标签的id,内容包括js点击删除确认并获取a标签id值,js中如何用id去获取a标签?,js如何获得被点击的a标签的Id或者url?。添加onclick事件,获取href属性就知道具体的url地址了<br><!doctype html><br><html><br><bo

资讯

js中的闭包怎么理解

阅读(4)

本文主要为您介绍js中的闭包怎么理解,内容包括JavaScript的闭包是什么意思以及作用和应,js中的闭包怎么用?求详解,最好是个人体会,如何理解和应用javascript闭包。相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript

资讯

适合vue.js的编辑器

阅读(5)

本文主要为您介绍适合vue.js的编辑器,内容包括什么编辑器写Vue比较好,生成前端代码的神器呢?,写vue.js应该用什么编辑器/IDE才是最好的呢。项目脚手架代码生成工具项目脚手架主要做的项目的构建流程,环境的配置等。做到开箱即用。基于命令的

资讯

js判断div中的行数

阅读(5)

本文主要为您介绍js判断div中的行数,内容包括js如何让div中的数据一行一行显示,如何使用javaScript往div中追加数?,JS实现边打字边显示字数的代码如何写呢?。html xmlns=http://www.w3.org/1999/xhtml headtitle标题页-学无忧(www.xue51.c

资讯

js中display的值

阅读(6)

本文主要为您介绍js中display的值,内容包括js中的display,js中的display,怎么用javascript改变display的值。style是样式display 是样式中的显示"none"和"block"都是显示中的参数none 为不显示block为显示参考bloc

资讯

js中带缓冲的菜单效果

阅读(4)

本文主要为您介绍js中带缓冲的菜单效果,内容包括js缓冲效果菜单代码,礼物盒上面绳子怎么系,js缓冲效果菜单代码。1.把丝带的两头打一个结 2.用手按住中间位置,把右侧的丝不定期弯成一个圈 3.把左侧的丝带从上方折起,用右手的拇指按住 4.从右

资讯

js循环里面定义的变量赋值

阅读(6)

本文主要为您介绍js循环里面定义的变量赋值,内容包括怎么在js里给变量赋值,JS中如何把String[]循环赋值给一个变量,JS中如何把String[]循环赋值给一个变量。<script language="javascript"><br>var a = new Array();//初始化数组<br>a[0

资讯

js获取src的浏览器兼容

阅读(6)

本文主要为您介绍js获取src的浏览器兼容,内容包括求个js的兼容问题关于对iframe的src获取的,在jsp页面,日期选择框,如何写一个网页的javascript判断浏览器的代码E浏览器下可。做这个用控件吧,好做下载My97DatePicker4.8Beta3http://www.my97

资讯

js获得昨天的日期

阅读(8)

本文主要为您介绍js获得昨天的日期,内容包括javascript中如何获取昨天的日期???,JS如何利用当前时间来获取昨天的时间,JS如何利用当前时间来获取昨天的时间。Date 对象 启用基本存储器并取得日期和时间。 dateObj = new Date() dateObj = n

资讯

js中return和不return的区别

阅读(6)

本文主要为您介绍js中return和不return的区别,内容包括关于js中return的用法有一点不懂,求解,return的用法(在js中),大师们,js有的时候调用加return有的时候不加这是怎么个区别法搜。首先,一旦执行了return语句就会对function进行返回值返回

资讯

js清空所有input的值

阅读(6)

本文主要为您介绍js清空所有input的值,内容包括js怎么清空inputfile里的值?,如何清空一个div里面所有input框的值,怎么用简单的JavaScript清空一个div中所有input中的内容?。html:<input type="file" value="选择文件" id="fileInput" /><button

资讯

手机中的JS文件是什么

阅读(6)

本文主要为您介绍手机中的JS文件是什么,内容包括手机上的JavaScript什什么意思?,我的世界手机版js是什么js怎么用,在手机行业中,js是什么意思?。Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语

资讯

js获取的总时间长

阅读(8)

本文主要为您介绍js获取的总时间长,内容包括如何用JS获取audio标签的已播放时长并控制进度条的width?,用js如何获取mp3歌曲时间,JS实现获取服务器时间怎么写呢?。1. <audio id="audio" controls>。2. <source src="horse.ogg" type="audi

资讯

js分割字符串的方法

阅读(4)

本文主要为您介绍js分割字符串的方法,内容包括javascript拆分一个字符串,js中分割字符串,js字符串拆分?。在本例中,我们将按照不同的方式来分割字符串:123456<script type="text/javascript">var str="