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 ...
随机推荐
- Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现
模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框. 下面,我用一个小例子来简单展示实现模态框功能的过程: 1.为项目加包: ng add ngx-bootstrap 2.在xx ...
- [poj3074]Sudoku(舞蹈链)
题目链接:http://poj.org/problem?id=3074 舞蹈链精确覆盖的经典题目,一个数独每个位置的要求,可以得到以下四个约束1.每个位置有且只有一个数字2.每个位置的数字在一行只能出 ...
- dp(01背包问题)
且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励的时刻了! 小Ho现在手上有M张奖券,而奖品区有N件奖品,分别标号为1到N,其中第i件奖品需要need( ...
- 攻防世界--simple-unpack
下载链接:https://adworld.xctf.org.cn/media/task/attachments/b7cf4629544f4e759d690100c3f96caa 1.准备 获取到信息: ...
- falcon的api
一.判断session是否有效 # -*- coding: UTF- -*- #!/usr/bin/env python # Created by Administrator on // import ...
- JavaScript给动态插入的元素添加事件绑定
由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...
- elasticsearch 基础 —— Delete By Query API
Delete By Query API _delete_by_query 的简单用法,就是在查询匹配到的每个文档上执行删除.例如: POST twitter/_delete_by_query { &q ...
- gcc版本切换
查看安装的gcc版本 sudo update--alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-5 100 显示所有版本gcc路径 sudo ...
- ELKStack之生产案例(下)
ELKStack之生产案例(下) 链接:https://pan.baidu.com/s/1V2aYpB86ZzxL21Hf-AF1rA 提取码:7izv 复制这段内容后打开百度网盘手机App,操作更方 ...
- Ehcahe独立使用
<?xml version="1.0" encoding="utf-8"?><ehcache xmlns:xsi="http://w ...