javascript中call(),apply()用法
//上下文模式:根据用户传递的参数产生不同的结果
//实现方式: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()用法的更多相关文章
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- JavaScript中this的用法 及 如何改变this的指向
要懂得JavaScript中this的用法,首先需要知道,JavaScript中的作用域相关知识. var fun = function(){ var flag = 1; console.log(fl ...
- 从函数调用的角度,探讨JavaScript中this的用法
js函数调用方式大概可分为:函数调用,构造器调用,call或apply,方法调用四种方式.下面结合一些基础概念和实测代码,从函数调用的角度,探讨JavaScript中this的用法. 1. new对函 ...
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript中 try catch用法
javascript中 try catch用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-08-16我要评论 JS try catch语句一般在什么情况下使用?是必须使 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”
JavaScript中的setInterval用法(资料来源:博主---八神吻你 ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...
- javascript中的继承用法
本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...
- javascript中的apply,call,bind详解
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
随机推荐
- 《JAVA设计模式》之中介者模式(Mediator)
在阎宏博士的<JAVA与模式>一书中开头是这样描述调停者(Mediator)模式的: 调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从 ...
- vue配置域名访问
vue配置域名访问其实很简单,新建一个vue的项目,不废话,直接上截图 红色框住的两行就是设置访问的域名以及端口,默认是host: localhost port: 8080 像这样修改之后,重启项目, ...
- Java单链表
一.概述 二.主方法 //创建头结点 private HeroNode head = new HeroNode(-1,null,null); //计数器,用于id的自增 private static ...
- ptmx
ptmx DESCRIPTION The file /dev/ptmx is a character file with major number 5 and minor number 2, usua ...
- SQL 查询中not in 与 not exists 的区别
1.in和exists in是把外表和内表作hash连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询,一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表 ...
- 函数异步模拟实现ajax
//模拟ajax function getData(callback){ setTimeout(function(){ var name='leo' callback(name) },1000) re ...
- 微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...
- qt opencv 视频分析
脱岗 越线 qimage qpixmap opencv 回调视频采集
- js 弹窗并定时关闭
1. $('input').click(function() { prompt('点击成功', 2000) }) function prompt(newName, time, fn) { var $d ...
- 如何设置Fiddler来拦截Java代码发送的HTTP请求,进行各种问题排查
我们使用Java的RestTemplate或者Apache的HTTPClient编程的时候,经常遇到需要跟踪Java 代码发送的HTTP请求明细的情况.和javascript代码在浏览器里发送请求可以 ...