//上下文模式:根据用户传递的参数产生不同的结果
//实现方式:call/apply:这两个都是定义在Function.prototype.call——>目的:任何函数都可以访问到call/apply
//call方法的第一个参数表示(本次调用该函数,)函数内部的this的值
function fn(){
console.log(this.name);//张三
}
fn();//函数调用模式——>this指向window window自带一个name属性:""
fn.call({name:"张三"});
var o={};
fn.call(o);//本次调用,fn函数内部的this的值指向o对象
//——>打印结果:undefined(一个对象中访问不到某个属性的时候,值就是undefined) function foo(){
console.log(this.name);
return [1,3,5];
}
foo();//函数调用模式——>foo函数内部的this指向window,返回值由return决定
//window.name——>""
var f1=foo.call({name:"张三"});//上下文调用模式——>foo函数内部this指向传递的参数
//this.name——>"张三"
console.log(f1.__proto__);//返回值由return语句决定
//——>Array.prototype
var f2=new foo();//构造函数调用模式——>foo函数内部this指向构造函数的实例
//——>this.name:undefined
console.log(f2.__proto__);//——>Array.prototype
function fn(){
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//利用call方法来调用fn函数的时候,如果需要传递实参,将实参作为call方法的的第二个参数开始依次传递
fn.call(null,1,3,5);//call方法的第二个参数是fn方法的第一个实参,第三个参数是fn方法的第二个实参
fn.apply(null,[1,3,5]);//apply方法的第二个参数是一个数组对象,这个数组中第一个元素是fn的第一个实参,数组的第二个元素是fn的第二个实参。。。
//fn.apply(函数内部的this的值,[实参1,实参2。。。实参n])
//面试题:call/apply方法有什么异同?
//1、相同点:a、他们都是Function.prototype对象中定义的方法
// b、第一个参数都是表示函数内部的this的值
//2、不同点:如果需要给函数传递参数的时候,利用call方法,将函数的参数从第二个参数开始依次排开
// 利用apply方法,apply方法的第二个参数是一个数组对象,数组的第一个参数表示函数的第一个实参,依次以此类推 //数组里面的push方法实现的功能:往数组里面添加一个元素
var arr=[1,3,5];//{0:1,1:3,2:5,length:3}
arr.push(10);//{0:1,1:3,2:5,3:10,length:4}
//伪数组
var o={0:10,length:1};
// o[1]=20;
// o.length++;
// o[2]=30;
// o.length++;
// o[3]=50;
// o.length++;
//借用数组的push方法:首先需要访问到push方法
//使用场景1、借用数组的push方法往伪数组里面添加元素
[].push.call(o,10,30,50,70,80,100);
[].push.apply(o,[10,30,50,70,80,100]);
//使用场景2:借用数组的push方法往数组中添加多个元素(这多个元素在一个数组中)
var arr1=[1,3,5];
var arr2=[10,20,30];
//要将arr2中的元素依次添加到arr1中
// for (var i = 0; i < arr2.length; i++) {
// arr1.push(arr2[i]);
// }
//[].push.call(arr1,arr2);//——>往arr1中添加一个元素,该元素是一个数组
[].push.apply(arr1,arr2);//——>往arr1中添加了多个元素
//——>push方法内部通过隐式迭代的方式添加多个元素 /借用构造函数实现继承:需要2个构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
// function Student(name,age,number){
// this.name=name;
// this.age=age;
// this.number=number;
// }
function Student(name,age,number){
//借用构造函数实现继承
Person.call(this,name,age);
this.number=number;
}
var s1=new Student("张三",20,666);
//借用构造函数实现继承:子类构造函数(Student)借用父类构造函数(Person)来完成:给子类的实例添加属性
//注意条件:由于要借用父类构造函数,所以父类构造函数的功能要对子类对象通用

  

javascript中call(),apply()用法的更多相关文章

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

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

  2. JavaScript中this的用法 及 如何改变this的指向

    要懂得JavaScript中this的用法,首先需要知道,JavaScript中的作用域相关知识. var fun = function(){ var flag = 1; console.log(fl ...

  3. 从函数调用的角度,探讨JavaScript中this的用法

    js函数调用方式大概可分为:函数调用,构造器调用,call或apply,方法调用四种方式.下面结合一些基础概念和实测代码,从函数调用的角度,探讨JavaScript中this的用法. 1. new对函 ...

  4. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  5. javascript中 try catch用法

    javascript中 try catch用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-08-16我要评论 JS try catch语句一般在什么情况下使用?是必须使 ...

  6. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  7. 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”

    JavaScript中的setInterval用法(资料来源:博主---八神吻你   ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...

  8. javascript中的继承用法

    本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...

  9. javascript中的apply,call,bind详解

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

随机推荐

  1. 设置div标签可以输入文字

    1.contenteditable 属性可以设置div标签为克输入标签,   2.input和textarea虽然是常用的输入标签,但是这两个标签不能设置最大高度和最小高度, 随意如果想随着输入的内容 ...

  2. java_第一年_JavaWeb(8)

    前面说到,JSP在运行时会被编译成Servlet源代码,通过_jspServlet方法处理请求,此时该方法会传递和提供9个与web开发相关的对象进行使用,开发人员在JSP页面通过对这些变量即可引用这9 ...

  3. Go语言_流程控制语句:for、if、else、switch 和 defer

    流程控制语句:for.if.else.switch 和 defer 学习如何使用条件.循环.分支和推迟语句来控制代码的流程. Go 作者组编写,Go-zh 小组翻译. https://go-zh.or ...

  4. tornado ioloop current和instance的一些区别

    import tornado.ioloop # 此时_current没有instance print dir(tornado.ioloop.IOLoop._current) # 通过instance ...

  5. 一个神奇却很简单的css特效

    在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的. 他这个效果就是鼠标放在左半部 ...

  6. swiper轮播图设置每组显示的个数及自定义slide宽度

    一.html演示代码: <div class="swiper-container"> <div class="swiper-wrapper"& ...

  7. Sass-变量计算

    在 Sass 中除了可以使用数值进行运算之外,还可以使用变量进行计算,其实在前面章节的示例中也或多或少的向大家展示了.在 Sass 中使用变量进行计算,这使得 Sass 的数学运算功能变得更加实用.一 ...

  8. RequestMappingHandlerMapping详解

    我们先理简单梳理一个关系 关系梳理 spring ioc 是spring的核心,用来管理spring bean的生命周期 MVC 是一种使用 MVC(Model View Controller 模型- ...

  9. ltp-ddt nand_perf_ubifs_w_cpuload

    NAND_M_PERF_UBIFS_CPU_LOAD source 'common.sh';/opt/ltp/runltp -f ddt/nand_perf_ubifs -s "NAND_S ...

  10. Mongodb Capped Collection集合

    MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环形队列,当集合空间用完后,再插入的元素就会覆盖最初始的头部的元素! ...