函数的四种调用模式.上下文调用.call.apply
闭包:函数就是一个闭包,一个封闭的作用域;
/*window的name属性*/
function fn(){
console.log(this.name);
}
fn.call({name:"zhangsan"});//"zhangsan"
console.log();
fn();//'' 打印空字符串,此时调用fn其中的的this指的是window对象,
//window对象具有name属性,值是一个空字符串
//函数的四种调用模式
//上下文模式 call apply 借用的概念
function foo(){
}
//当foo函数声明好了后无法确定foo函数的身份,只有在调用的时候
//才能确定foo的所属;根据foo函数的执行情况和返回结果
//js中函数由四种不同的调用方式,其中this的指向,返回值由return决定(构造函数特殊)
//1.函数调用模式
foo();//本质就是使用window对象,调用;指向window
//2.方法调用模式,把函数当做对象的方法;this指向obj
var obj ={
fn:function(){
}
};
obj.fn();
obj['fn']();
//3构造函数调用 将函数当成构造函数来调用(new);this指向构造函数的实例
functionFoot(){}
newFoot();
//构造函数没有return语句,返回的是构造函数的实例
//有return,return的内容是一个对象,返回值是return语句的对象;如果return的是基本数据类型,那返回值
//还是实例
functionFoot2(){
return[1,2,3];
}
var foot2=newFoot2();
console.log(foot2.__proto__);//Array.prototype ?Array[0]
//4.上下文调用模式,根据用户传递的参数产生不同的结果 .this的值由调用者决定;
//call/apply 这两个方法都是定义在Function.prototype中的方法,这样任何函数都能访问到这两个方法
//调用模式,只有函数才能调用
function fn(){
console.log(this.name);
}
console.log(fn.call()===Function.prototype.call());//true
fn.call({name:"zhangsan"});//zhangsan
//call方法的第一个参数指的是本次调用该函数内部this的值
fn();//此时this指向window window有一个name属性是"" 空字符串.
function foo(){
console.log(this.name);
return[1,2,3];
}
foo();//""
var f1=foo.call({name:"张三"});//"张三"
console.log(f1.__proto__);//上下文模式return返回值由return决定,返回值是一个数组对象 //Array.prototype
var f2=new foo();//undefined
console.log(f2.__proto__);//Array.prototype
/*call方法*/
/*以下方法使用apply使用时相同的*/
function foo(){
console.log(this.age);
}
var obj={age:18};
foo.call(obj);//18 其中的this指的是obj
foo.call(null);//foo函数中的this指向window
//call方法的第一个参数还可以是数字,字符串,布尔值这些基本的数据类型
foo.call(3);//number 数字3转化为对应的基本包装类型Number类型
/*call方法*/
function foo(){
console.log(this.age);
}
var obj ={age:18};
foo.call(obj);//18 其中的this指的是obj
foo.call(null);//foo函数中的this指向window
//call方法的第一个参数还可以是数字,字符串,布尔值这些基本的数据类型
foo.call(3);//number 数字3转化为对应的基本包装类型Number类型
/*call有实参的情况*/
function fn(){
//传递的参数在函数内部使用arguments获取
for(var i =0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
//使用call方法来调用fn函数的时候,如果需要传递实参,将实参作为call方法的第二个参数开始依次传递
fn.call(null,1,2,3,4)
/*apply有实参的情况*/
function fun(){
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
//使用apply方法来调用fun函数的时候,第二个参数是一个数组对象
fun.apply(null,[1,3,5]);
//第一个参数:函数内部this的值
//[实参1,实参2,实参3]
// call/aply的异同点
//相同点:他们都是Function.prototype对象中定义的方法
//第一个参数都表示函数内部的this的值
//不同点:在传参的时候,如果给函数传参的时候利用call方法,
// apply传递的是数组.call传递的是用逗号分隔的一个一个的参数
/*上下文模式借用内置方法*/
//数组里面的push方法实现的功能,向数组里面添加一个元素
//1.借用push方法,向伪数组中添加元素;[].push Array.prototype
//伪数组是没有push方法的,首先我们要能访问到push方法
var arr={1:10,2:28};
[].push.call(arr,10,20,30);
console.log(arr);
//jQuery对象也是伪数组
//向数组中添加元素的方法
//push
//arr[arr.length]
//2.借用数组的push方法向数组中添加元素
var arr1 =[];
var arr2=[10,120,10,20];
//需求 将arr2中的元素添加到arr1中
[].push.apply(arr1,arr2);//apply方法
for(var i=0;i<arr2.length;i++){//之前的方法
arr1.push(arr2[i]);
}
//数组的方法经常被伪数组所借用
//1.需求 将一个伪数组转化为真数组:slice
var arr=[13,12,12,34];
arr.slice(1);//从索引1开始截取,到最后一个元素[12,12,34]
var obj ={0:"范明",1:"小沈阳",length:2};
[].slice.call(obj);//返回的是一个数组["范明","小沈阳"];
[].slice.call(obj,1);//返回的是一个数组["小沈阳"];
//2.删除伪数组里面的元素
var obj2 ={0:"范明",1:"小沈阳",2:"沈阳",length:2};
//删除数组中的第第三个元素,参数从第几个开始删,删除几个
var newObj=[].splice.call(obj2,1,1);
console.log(newObj);//["小沈阳"]
console.log(obj2);//Object {0: "范明", 2: "沈阳", length: 1}
[].splice.call(obj2,2,1,200,300);//从第三个参数开始是添加的元素
//3.借用构造函数实现继承
functionPerson(name,age){//父类构造函数
this.name=name;
this.age=age;
}
// function Student(name,age,number){
// this.age=age;
// this.name=name;
// this.number=number;
// }
//优化
functionStudent(age,name,number){//子类构造函数
Person.call(this,name,age);//给构造函数的实例,添加name,age两个属性
//this代表Student的实例
//Student构造函数借用Person构造函数
this.number=number;
}
var stu =newStudent(18,"zhangsan",12);
console.log(stu);
//注意条件:父类构造函属性要对子类对象通用
/*jQuery大结构原理 init*/
function jQuery(){
//init是一个构造函数,用于创建jQuery对象,并返回这个对象
returnnew jQuery.prototype.init();
}
jQuery.prototype={
constructor:jQuery,
init:function(){
returnthis;
},
css:function(){}
};
//init的原型指向jQuery的原型,这样init创建的对象就可以使用jQuery原型中的方法了
jQuery.prototype.init.prototype=jQuery.prototype;
函数的四种调用模式.上下文调用.call.apply的更多相关文章
- JS面向对象函数的四种调用模式
函数的四种调用模式 概念 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器,...这些东西的本质都是函数 函数, 方法, 事件, 构造器,...只是所处的位置不同 这四种模式分别是 函数 ...
- JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
- JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法
缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...
- JavaScript函数的四种存在形态
函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态 1.函数形态: var foo = function() { ale ...
- Android Activity 四种启动模式
task和back stack(任务和回退栈) 任务启动,task被加入到回退栈的栈顶,返回的时候回退栈的栈顶任务会被弹出,并被销毁,栈中的前一任务恢复运行,当activity销毁是,系统不会保留ac ...
- Android中Activity的四种启动模式
要了解Android的启动模式先要了解一下Activity的管理方式: 1.Activity的管理机制 Android的管理主要是通过Activity栈来进行的.当一个Activity启动时,系统根据 ...
- Activity的四种启动模式和onNewIntent()
转自:http://blog.csdn.net/linghu_java/article/details/17266603 Android中Activity启动模式详解 在Android中每个界面都 ...
- C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏
C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...
- 关于android的Activity的四种启动模式
最近做项目遇到一个问题,当触摸屏幕的时候通过intent启动activity,发现会启动多次,而后查阅资料,发现,原来是activity的模式设置问题. Activity的启动模式可以通过Androi ...
随机推荐
- python+appium学习总结
经过了这个月的学习,今天终于完成了公司APP系统的自动化的脚本的编写. 通过单元测试框架UNITTEST,进行脚本的连跑,本来还想把测试数据统一写到EXCEL表格内,实现脚本与数据的分离. 后来发现增 ...
- HTML-参考手册: HTML ASCII
ylbtech-HTML-参考手册: HTML ASCII 1.返回顶部 1. HTML ASCII 参考手册 ASCII 字符集被用于因特网上不同计算机间传输信息. ASCII 字符集 ASCII ...
- Ettercap详细参数
关于界面:ettercap提供 4 种运行界面: Text #文本模式,参数 -T ,一般配合 -q(安静模式)使用 Curses/GTK #图形模式,参数 -C ...
- promise基础用法
/** * Created by liyinghao on 2016/11/6. */ const fs = require('fs'); /* * 新建一个Promise对象,Promise就是一个 ...
- sqlserver定时作业,定时执行存储过程
首先,我想说,我真的是渣了,一个这个玩意弄了半天,算了,直接切入正题吧. 第一步: 先写好存储过程 用了两张表,你们自己建立吧 <br data-filtered="filtered& ...
- camunda
Camunda BPM 用途: 流程管理.流程解决方案 支持语言: java ,nodejs 入门指导:1.https://docs.camunda.org/get-started/quick-s ...
- Django Paginator分页器
如何实现在django中实现分页效果,我使用的是django自带的分页器paginator具体是使用办法是这样的首先引用from django.core.paginator import Pagina ...
- js中继承的实现,原型链的知识点归纳,借用构造函数,组合继承(伪经典继承)
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/31/js%e4%b8%ad%e7%bb%a7%e6%89%bf%e7%9a%84%e ...
- JsonSchema 启蒙
jsonSchema 的应用场景有很多,毕竟现在各个接口传输数据基本都是json,比如你做测试想对部分json字段进行校验或者统计你该如何写?解析json获取字段然后if else?不是说不可以但是也 ...
- nginx匹配以XXX结尾的
匹配以do结尾的所有文件:如http://192.168.126.168:8080/delivery/transportPlanData.do?startRelease=2019-07-06& ...