1. 前言

为什么将这三个概念放在一起说。原因是这些是会在实现js 继承会需要使用到的

2. call 和 apply

call 和 apply 的作用基本类似， 都是去执行function并将这个function 的context替换成第一个参数带入。 两者的不同是call 必须将function 的参数一一带入，而 apply  只要在第二个参数带入一个数列。
  1. function fn( arg1, arg2,... ){
  2. // do something
  3. }
  4. fn( arg1, arg2,... );
  5. fn.call( context, arg1, arg2,... );
  6. fn.apply( context, [ arg1, arg2,... ]);

手册的解释：
===================================
call 方法
调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj
可选项。将被用作当前对象的对象。

arg1, arg2,  , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
=====================================

  1. <!--by oscar999 2013-1-17-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9. <script>
  10. var func=new function(){this.a="func"}
  11. var newfunc=function(x){
  12. var a="newfunc";
  13. alert(this.a);
  14. alert(x);
  15. }
  16. newfunc.call(func,"inputParameter1");
  17. /*alert are
  18. * func/inputParameter1; not newfunc/inputParameter1
  19. */
  20. </script>
  21. </body>
  22. </html>

从以上的例子可以看出， alert(this.a), 返回的是并不是当前函数里的值。

使用call 执行的速度会稍微快一些， 不过差异不大。

3.prototype

JavaScript没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。
prototype 其实就是构造函数的一个属性。
所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

  1. function Person(name){
  2. this.name = name;
  3. this.gender = "male";
  4. }
  5. var person1 = new Person("MM");
  6. var person2 = new Person("YY");
  7. person1.gender = "female";
  8. alert(person2.gender);// male
  9. </script>
  1. <script>
  2. function Person(name){
  3. this.name = name;
  4. }
  5. Person.prototype.gender = "female";
  6. var person1 = new Person("MM");
  7. var person2 = new Person("YY");
  8. alert(person2.gender);// male
  9. </script>

比较以上两个例子就知道了。

4. 参考

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

JavaScript 之call , apply 和prototype 介绍的更多相关文章

  1. JavaScript中call,apply和prototype

    [TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...

  2. javascript call与apply关键字的作用

    apply接受两个参数.第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合. call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数. 1 2 3 4 ...

  3. 《JavaScript总结》apply、call和bind方法

    在JavaScript中,apply.call.bind这个三个方法,它们的作用都是为了改变某个函数运行时的上下文, 也就是改变函数体内的this指向. 在一个函数里,存在“定义时上下文”.“运行时上 ...

  4. Java程序猿的JavaScript学习笔记（5——prototype和Object内置方法）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. 深入了解JavaScript中基于原型（prototype）的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  6. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  7. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  8. 转---- javascript prototype介绍的文章

    JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScrip ...

  9. JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(t ...

随机推荐

  1. Fast R-CNN论文理解

    论文地址:https://arxiv.org/pdf/1504.08083.pdf 翻译请移步:https://blog.csdn.net/ghw15221836342/article/details ...

  2. Shell循环输入符合条件为止

    提供用户输入,直到输入d/D/r/R为止. #!/bin/bash ]; do echo -n "(D)ebug or (R)elease?" read select_build_ ...

  3. template.js 模版内调用外部JS方法

    template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.模版定义如下: ...

  4. PHP消息队列之Beanstalk

    Beanstalk,一个高性能.轻量级的分布式内存队列

  5. 【备档】客户端自动化（主Android Appium + python

    之前做分享写的文档,备档~ 0.移动客户端自动化简介 客户端自动化测试的本质 定位对象 · 操作对象 · 校验对象 对象的定位应该是自动化测试的核心,要想操作.校验一个对象,首先应该识别这个对象. 一 ...

  6. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  7. 20170706xlVBA城中村改造汇总

    Public Sub GatherDataPicker() Application.ScreenUpdating = False Application.DisplayAlerts = False A ...

  8. Codeword CodeForces - 666C (字符串计数)

    链接 大意:求只含小写字母, 长度为n, 且可以与给定模板串匹配的字符串个数 (多组数据) 记模板串为P, 长为x, 总串为S. 设$f_i$为S为i时的匹配数, 考虑P最后一位的首次匹配位置. 若为 ...

  9. python-day9-数据类型总结

    数据类型总结: 常用:  数字 字符串 列表 元组 字典 不常用:集合 1.按照存值个数: 1个:数字,字符串 多个:列表,元组,字典,(集合) 2.按照可变不可变: 可变:列表,字典,(集合) 不可 ...

  10. GDI+ DrawString字间距问题

    ///   <summary> ///   绘制任意间距文字 /// </summary> ///   <param   name= "text "& ...