js中继承的几种用法apply,call,prototype

最新推荐文章于 2021-11-08 16:20:55 发布
最新推荐文章于 2021-11-08 16:20:55 发布
阅读量2.1k 收藏
点赞数

一，js中对象继承

js中有三种继承方式

1,js原型（prototype）实现继承

[html] view plain copy print ?
  1. <span style="BACKGROUND-COLOR: #ffffff"><span style="font-size:18px;"><html>  
  2. <body>  
  3. <script type="text/javascript">  
  4.     function Person(name,age){  
  5.         this.name=name;  
  6.         this.age=age;  
  7.     }  
  8.     Person.prototype.sayHello=function(){  
  9.         alert("使用原型得到Name："+this.name);  
  10.     }  
  11.     var per=new Person("马小倩",21);  
  12.     per.sayHello(); //输出：使用原型得到Name:马小倩  
  13.       
  14.       
  15.     function Student(){}  
  16.     Student.prototype=new Person("洪如彤",21);  
  17.     var stu=new Student();  
  18.     Student.prototype.grade=5;  
  19.     Student.prototype.intr=function(){  
  20.         alert(this.grade);  
  21.     }  
  22.     stu.sayHello();//输出：使用原型得到Name:洪如彤  
  23.     stu.intr();//输出：5  
  24. </script>  
  25. </body>  
  26. </html></span></span>  

2.构造函数实现继承

[html] view plain copy print ?
  1. <span style="font-size:18px;"><html>  
  2. <body>  
  3. <script type="text/javascript">  
  4.     function  Parent(name){  
  5.         this.name=name;  
  6.         this.sayParent=function(){  
  7.             alert("Parent:"+this.name);  
  8.         }  
  9.     }  
  10.   
  11.     function  Child(name,age){  
  12.         this.tempMethod=Parent;  
  13.         this.tempMethod(name);  
  14.         this.age=age;  
  15.         this.sayChild=function(){  
  16.             alert("Child:"+this.name+"age:"+this.age);  
  17.         }  
  18.     }  
  19.   
  20.     var parent=new Parent("江剑臣");  
  21.     parent.sayParent(); //输出：“Parent:江剑臣”  
  22.     var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”  
  23.     child.sayChild();  
  24. </script>  
  25. </body>  
  26. </html></span>  

3.call , apply实现继承

[html] view plain copy print ?
  1. <span style="font-size:18px;"><html>  
  2. <body>  
  3. <script type="text/javascript">  
  4.     function  Person(name,age,love){  
  5.         this.name=name;  
  6.         this.age=age;  
  7.         this.love=love;  
  8.         this.say=function say(){  
  9.             alert("姓名："+name);  
  10.         }  
  11.     }  
  12.       
  13.     //call方式  
  14.     function student(name,age){  
  15.         Person.call(this,name,age);  
  16.     }  
  17.       
  18.     //apply方式  
  19.     function teacher(name,love){  
  20.         Person.apply(this,[name,love]);  
  21.         //Person.apply(this,arguments); //跟上句一样的效果，arguments  
  22.     }  
  23.       
  24.     //call与aplly的异同：  
  25.     //1,第一个参数this都一样,指当前对象  
  26.     //2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）  
  27.       
  28.     var per=new Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼”  
  29.     per.say();  
  30.     var stu=new student("曹玉",18);//输出：“曹玉”  
  31.     stu.say();  
  32.     var tea=new teacher("秦杰",16);//输出：“秦杰”  
  33.     tea.say();  
  34.    
  35. </script>  
  36. </body>  
  37. </html></span>  

二、call和apply的用法（详细介绍）

js中call和apply都可以实现继承，唯一的一点参数不同，func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])。

JS手册中对call的解释：

[plain] view plain copy print ?
  1. <span style="font-size:18px;">call 方法  
  2.     调用一个对象的一个方法，以另一个对象替换当前对象。  
  3.   
  4.     call([thisObj[,arg1[, arg2[,   [,.argN]]]]])  
  5.   
  6.     参数  
  7.     thisObj  
  8.     可选项。将被用作当前对象的对象。  
  9.   
  10.     arg1, arg2,  , argN  
  11.     可选项。将被传递方法参数序列。  
  12.   
  13.     说明  
  14.     call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。  
  15.   
  16.     如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。</span>  

   说简单一点，这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。下面以apply为例，说说这两个函数在 js中的重要作用。如：

[javascript] view plain copy print ?
  1. <span style="font-size:18px;"> function Person(name,age){   //定义一个类  
  2.         this.name=name;     //名字  
  3.         this.age=age;       //年龄  
  4.         this.sayhello=function(){alert(this.name)};  
  5.     }  
  6.     function Print(){            //显示类的属性  
  7.         this.funcName="Print";  
  8.         this.show=function(){  
  9.             var msg=[];  
  10.             for(var key in this){  
  11.                 if(typeof(this[key])!="function"){  
  12.                     msg.push([key,":",this[key]].join(""));  
  13.                 }  
  14.             }  
  15.             alert(msg.join(" "));  
  16.         };  
  17.     }  
  18.     function Student(name,age,grade,school){    //学生类  
  19.         Person.apply(this,arguments);//比call优越的地方  
  20.         Print.apply(this,arguments);  
  21.         this.grade=grade;                //年级  
  22.         this.school=school;                 //学校  
  23.     }  
  24.     var p1=new Person("卜开化",80);  
  25.     p1.sayhello();  
  26.     var s1=new Student("白云飞",40,9,"岳麓书院");  
  27.     s1.show();  
  28.     s1.sayhello();  
  29.     alert(s1.funcName);</span>  

   另外，Function.apply()在提升程序性能方面有着突出的作用：
    我们先从Math.max()函数说起，Math.max后面可以接任意个参数，最后返回所有参数中的最大值。
    比如

[javascript] view plain copy print ?
  1. <span style="font-size:18px;">alert(Math.max(5,8));   //8  
  2.     alert(Math.max(5,7,9,3,1,6));   //9  
  3.   
  4.     //但是在很多情况下，我们需要找出数组中最大的元素。  
  5.   
  6.     var arr=[5,7,9,1];  
  7.     //alert(Math.max(arr));    // 这样却是不行的。NaN  
  8.   
  9.     //要这样写  
  10.     function getMax(arr){  
  11.         var arrLen=arr.length;  
  12.         for(var i=0,ret=arr[0];i<arrLen;i++){  
  13.             ret=Math.max(ret,arr[i]);  
  14.         }  
  15.         return ret;  
  16.     }  
  17.       
  18.     alert(getMax(arr)); //9  
  19.   
  20.     //换用apply，可以这样写  
  21.     function getMax2(arr){  
  22.         return Math.max.apply(null,arr);  
  23.     }  
  24.       
  25.     alert(getMax2(arr)); //9  
  26.   
  27.     //两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。  
  28.   
  29.     //再比如数组的push方法。  
  30.     var arr1=[1,3,4];  
  31.     var arr2=[3,4,5];  
  32.     //如果我们要把 arr2展开，然后一个一个追加到arr1中去，最后让arr1=[1,3,4,3,4,5]  
  33.     //arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]  
  34.   
  35.     //我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2)，但是concat方法并不改变arr1本身)  
  36.   
  37.     var arrLen=arr2.length;  
  38.     for(var i=0;i<arrLen;i++){  
  39.         arr1.push(arr2[i]);  
  40.     }  
  41.   
  42.     //自从有了Apply,事情就变得如此简单  
  43.   
  44.     Array.prototype.push.apply(arr1,arr2); //现在arr1就是想要的结果</span> 
wu_qionglei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中继承的几种用法总结(apply,call,prototype)
01-19
js中有三种继承方式 1.js原型（prototype）实现继承 代码如下:<SPAN xss=removed><SPAN xss=removed><html> <body> [removed] function Person(name,age){ this.name=name; this.age=age; } ...
Javascript中的几种继承方式对比分析
11-26
虽然JavaScript被许多人认为不是一种传统的面向对象语言，但它的灵活性和强大的继承模式使其在Web开发中扮演着关键角色。在JavaScript中，有多种实现继承的方式，每种都有其优缺点，适用于不同的场景。 首先，我们...
js 采用apply实现继承
菜刀居士的专栏
05-20 576
//采用apply方式实现js继承         function A(color) {             this.Acolor = color;             this.AshowColor = function() {                 document.writeln("Acolor: " + this.Acolor);             }
JS实现继承（apply）
u013067420的博客
01-06 315
function Person(name,car){     this.name=name;     this.car=car;     this.display=function (){         alert(this.name);     } } function Batman(name,car){     Person.apply(t
js中的apply和call，继承（一）
zqh862735956的博客
04-07 1391
js中apply和call以及继承昨天，有朋友问我，apply()和call()的用法，当时就蒙了，记得之前应该遇到过好多次，也用到过，这次，就认真的总结了一点，分享了出来。apply和callcall函数名.call(要让this指向的对象, arg1, arg2...argN); //1. 调用函数 //2. 让函数中的this指向，第一个参数中的对象 //3. 把第二个及以后所有的参数依次传递
JavaScript中call,apply,bind方法的总结。
hwluo12的博客
05-19 214
一般用来指定this的环境，在没有学之前，通常会有这些问题。var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined我们是想打印对象a里面的user却打印出来undefined是怎么回事呢？如果我们直接执行a.fn()是可以的。
浅谈js中的三种继承方式及其优缺点
11-23
在这篇文章中，我们将探讨三种主要的继承方式：基于`prototype`的继承、使用`apply`方法的继承以及结合`call`和`prototype`的继承。每种方式都有其特定的优缺点，下面我们将详细解析它们的工作原理。 ### 1. 基于`...
JavaScript中 apply/call 与面向对象语言中继承关系的联系和区别
Hey firefly
10-24 1160
apply是否可理解为类的继承？
js使用prototype，call/apply实现继承
赶路人儿
08-23 2290
1、原型方式 上一篇文章（https://blog.csdn.net/liuxiao723846/article/details/81984357）中介绍了原型和原型链，我们可以知道，使用原型继承可以达到： 可以动态的给所需对象设置属性和方法 ； 子类继承父类，可以使用和享有父亲的所有属性和方法。 &lt;html&gt; &lt;body&gt; &lt;script type=...
javascript 的 apply实现继承
小辣抓
08-05 1301
小生初学js，如果有什么错误的地方，还请大家见谅，还请大家指出. apply()是Function()里的一个函数，主要功能我们下面再讲，我第一次用apply()的时候也是稀里糊涂的，后来我发现它其实和其他高级语言里的继承有很大的关系. //定义一个函数Person var Person = function(name,age){ //这里的this指代的是Person的实例的
vue源码中值得学习的方法
LuckyWinty的博客
10-12 343
作者：chinamasters https://segmentfault.com/a/1190000025157159最近在深入研究vue源码，把学习过程中，看到的一些好玩的的函数方...
javascript call() apply() 函数 实现继承
Genge
11-02 725
ECMAScript规范给所有函数都定义了Call()与apply()两个方法，call与apply的第一个参数都是需要调用的函数对象，在函数体内这个参数就是this的值，剩余的参数是需要传递给函数的值，call与apply的不同就是call传的值可以是任意的，而apply传的剩余值必须为数组。 eg：A.call(B,',');  意思就是用B来调用A(',');apply类似，另外基
javascript 6种继承和call()、apply()、bind() 的用法
L_C_sunny的博客
11-08 754
js 6种继承 call()、apply()、bind() 的用法； 一、原型链继承 重点：让新实例的原型等于父类的实例。 　　　　特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！） 　　　　缺点：1、新实例无法向父类构造函数传参。 　　　　　　　2、继承单一。 　　　　　　　3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！） 二、借用构造函数继承 重点：用.ca
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
智慧校园整体解决方案-6PPT(102页).pptx
07-28
智慧校园整体解决方案是响应国家教育信息化政策，结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础，旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变，通过自动数据采集、智能分析和按需服务，实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通，确保系统能够满足不同用户角色的需求，并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面，构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等，以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能，增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术，实现人员和设备的智能管理，提高校园运营效率。 智慧教学部分，方案提供了智慧学习系统和精品录播教室方案，支持专业级学习硬件和智能化网络管理，促进个性化学习和教学资源的高效利用。同时，教学质量评估中心和资源应用平台的建设，旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理，通过智慧教室管理系统实现教室环境的智能控制和能效管理，打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设，将作为智慧校园的核心和入口，提供教务、一卡通、图书馆等系统的集成信息。 总体而言，智慧校园整体解决方案通过集成先进技术，不仅提升了校园的信息化水平，而且优化了教学和管理流程，为学生、教师和家长提供了更加便捷、个性化的教育体验。
anaconda配置pytorch环境.pdf
最新发布
07-28
使用Anaconda配置PyTorch环境是一个相对直接的过程，以下是一个详细的步骤指南，包括Anaconda的下载与安装、PyTorch环境的创建以及PyTorch的安装与验证。 一、Anaconda的下载与安装 1.访问Anaconda官网： 1.前往Anaconda官网下载最新版本的Anaconda。 2.下载Anaconda： 1.在官网首页，点击“Free Download”按钮，选择合适的操作系统版本进行下载。 3.安装Anaconda： 1.双击下载好的Anaconda安装包，按照提示进行安装。 2.注意选择安装路径（建议不安装在C盘），并确保安装路径为全英文。 3.安装过程中，根据需要选择“为所有用户安装”或“仅为当前用户安装”。 4.验证Anaconda安装： 1.安装完成后，打开“Anaconda Prompt”（或Anaconda Navigator），输入conda --version查看conda版本，以验证Anaconda是否安装成功。 二、创建PyTorch环境 1.打开Anaconda Prompt： 1.在开始菜单中找到并打开“Anaconda Pro
2024小米SOC面试经验
07-28
• 自我介绍，然后针对项目实习进行提问。 • sdram仲裁模块设计：面试官询问了我关于sdram（同步动态随机存取存储器）仲裁模块的设计思路，这可能涉及到如何高效地管理多个设备或进程对sdram的访问，确保数据一致性和性能优化。 • FIFO设计：我们探讨了FIFO（先进先出队列）是否使用了现成的IP核（知识产权核），并假设如果我自己设计FIFO时可能遇到的难点，如同步问题、缓冲区管理、性能优化等。 • 跨时钟域问题：讨论了跨时钟域信号同步的挑战，特别是信号展宽（metastability）的解决策略，这是确保数据在不同时钟域间可靠传输的关键。 • TMDS编码流程：面试官询问了我TMDS（Transition Minimized Differential Signaling，转换最小化差分信号）编码的具体流程，这通常涉及视频或高速数据传输领域，要求我对数据传输协议有深入理解。 • 项目调试方法：面试官要求我分享在项目中如何进行调试的经验，包括使用的工具、调试策略及问题解决过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值