我认知的javascript之函数调用
今天刚好周六没事,又由于工作的原因导致早上醒来就睡不着,无聊之下,就想到了 js 的function调用问题。当然,网上也是对javascript的一些事情说得很透了,但我觉得还是有必要把自己的想法说出来.好了,闲话短说,现在开始js的function调用解析。最后再啰嗦一句,如果写的有什么不对或者不全的地方,还请多多指点。
好了,正文开始:
虽然浏览器是多线程的,但是浏览器中的js引擎是一个基于事件驱动的单线程运行模式,也就是说,JS引擎会只会顺序的从任务列表中取任务。js中调用一个函数时,将暂停当前函数的执行,彻底控制权和参数给新的函数,除了传递形参(如果实际参数与形参个数不匹配,实际参数溢出,那么在被调用的函数中不会显示,但是可以通过arguments取出;实际少,那么在被调用的函数中相应的参数为undefined),还会附加两个参数,即this和arguments。this在面向对象编程中是非常重要的,它在js的函数调用中,决定了以什么方式调用函数,说到这,我好像忘了说函数的几种调用方式了。
函数调用大概有4种:
1.方法调用模式;
2.函数调用模式
3.构造器调用模式;
4.apply/call/bind调用模式
方法调用模式:当一个函数被保存为一个对象的属性时,我们称之为方法,当调用这个方法的时候,this就会指向当前方法所在的对象;
var myObjectMethod = {
method:function(isParameters){
if(isParameters){
return this.property="porpertyChange";
}
else{
return this.property;
}
},
porperty:"startCall"
}
myObjectMethod.method();//myObjectMethod.porperty = "startCall";
myObjectMethod.method(true); // myObjectMethod.porperty = "porpertyChange";
方法的this指向了方法所在的对象,并且可以通过this去获取/改变该对象中的属性,this指向改变是在调用的的时候,可以通过this获取该对象的方法称为公共方法(public);
函数调用模式:当一个函数非一个对象的属性时,那么他被当作一个函数来调用,this会指向全局(window);
var myObjectFunction = {
method: function(isParameters) {
var myFunction = function(){
return this.property="call";//thsi -> window
}
return myFunction();
},
property: "startCall"
}
window.property = "window.porperty ";
myObjectFunction.method(); //myObjectFunction.porperty = "startCall"; window.property ="cal";
当然,可以通过函数的作用域/闭包来获取myObjectFunction.property:
var myObjectFunction = {
method: function(isParameters) {
var that = this;
var myFunction = function(){
//thsi -> window
return that.property = "call";// that -> myObjectFunction
}
return myFunction();
},
property: "startCall"
}
window.property = "window.porperty ";
myObjectFunction.method(); //myObjectFunction.porperty = "call"; window.property ="window.porperty ";
构造器调用模式:继承是OO语言中一个重要的特性和概念。许多的OO语言中都支持两种继承方式:接口继承和实现继承。而js是同故宫原型链的方式实现继承的。通过new的方式调用,此时this会指向函数的prototype上
var myObjectFunction = {
method: function(isParameters) {
var myFunctionConstructor = function(){
}
myFunctionConstructor.prototype.property = "myFunction.prototype.property";
return new myFunctionConstructor();
},
property: "startCall"
}
window.property = "window.porperty ";
var result = myObjectFunction.method(); //result = myFunction.prototype; myObjectFunction.porperty = "startCall"; window.property ="window.porperty ";
//result.property =myFunction.prototype.property
上面那个例子估计有点迷糊,没有很好的体现出构造器调用模式
window.property = "window.prperty";
var method = function(val) {
this.property = val;//此处通过new构造方式调用,所以 this -> method.prototype
}
method.prototype.property = "method.prototype.property";
var myMethod = new method("val");//myMethod.property="val";window.property= "window.prperty";
希望这个例子,能让大家明白一点;
apply/call/bind调用模式调用模式:
apply/call/bind 的调用都能改变this的指向,使this指向设置的对象。
var myObjectFunction = {
method: function(a,b,c) {
return this.property;
},
property: "startCall"
}
var Object = {
property: "ObjectCall"
}
var result = myObjectFunction.method.apply(Object,[1,2,3]);
result = myObjectFunction.method.call(Object,4,5,6);
var myFunction = myObjectFunction.method.bind(Object,7,8);
myFunction(9);
apply/call/bind 的调用的区别:
1.apply/call调用立即执行,而bind是先绑定,需要手动去调用它;
2.apply传递的是一个数组,而call/bind是依次传值;
3.bind能绑定传递的参数,也可以不绑定参数
好吧,函数的调用到这儿就写完了,希望对大家有所帮助,不再之处,还望海涵,谢谢。
我认知的javascript之函数调用的更多相关文章
- 【总结整理】javascript的函数调用时是否加括号
javascript的函数调用时是否加括号 if(event.preventDefault){ event.preventDefault(); if判断条件里面不要加括号,不加括号是应该以属性形式,i ...
- Javascript中函数调用和this的关系
例子先行: var myObject={ foo:"bar", func:function(){ var self=this; console.log("outerfun ...
- JavaScript之函数调用与被调用的上下文对象this
不同的调用机制决定了函数上下文对象的不同: 1. 作为普通函数进行调用时,其上下文是全局对象window; 2. 作为(对象)方法进行调用时,其上下文对象时拥有该方法的对象; 3. 作为构造器( ...
- JavaScript 查看函数调用栈
1.调用栈 js中的this与函数调用栈密切相关. this实在函数调用时发生的绑定,它指向完全取决于函数在哪里被调用. 2.示例 <!DOCTYPE html> <html ...
- day05—JavaScript之函数调用
转行学开发,代码100天——2018-03-21 JavaScript中的函数调用有4种方式: 方式一:直接通过函数名调用 在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTM ...
- 我认知的javascript之作用域和闭包
说到javascript,就不得不说javascript的作用域和闭包:当然,还是那句老话,javascript在网上都说得很透彻了,我也就不过多的强调了: 作用域:javascript并没有像其他的 ...
- javascript 递归函数调用(recursive funciton call)
所谓的递归函数调用,就是自己调用自己的函数. var timerHandler = null; function a(){ console.log(123); timerHandler = setTi ...
- JavaScript外部函数调用AngularJS的函数、$scope
x 场景: 需要在用FusionCharts画的柱状图中添加点击事件,But弹出框是Angularjs搞的,我想的是直接跳到弹出框的那个路由里,然后在弹出框的控制器中绑定数据即可: /* 点击事件 * ...
- javascript函数调用的各种方法!!
在JavaScript中一共有下面4种调用方式: (1) 基本函数调用 (2)方法调用 (3)构造器调用 (4)通过call()和apply()进行调用 1. 基本函数调用 普通函数调用模式,如: J ...
随机推荐
- three.js全景漫游实践
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 简介 全景图分两种 由六张正方形图片组成的SkyBox 一整张的宽高比为 ...
- Redis Windows下安装方法
一.安装 首先在网上下载Redis,下载地址:https://github.com/MicrosoftArchive/redis/releases 根据电脑系统的实际情况选择32位还是64位,在这里我 ...
- ThinkPHP 数据库操作(五) : 存储过程、数据集、分布式数据库
存储过程 5.0支持存储过程,如果我们定义了一个数据库存储过程 sp_query ,可以使用下面的方式调用: $result = Db::query('call sp_query(8)'); 返回的是 ...
- Redis分区
数据是怎样分布在多个Redis实例上的 分区是将你的数据分布在多个Redis实例上,以至于每个实例只包含一部分数据. 为什么分区是有用的呢 Redis分区有两个主要目标: 它允许更大的数据库,用许多计 ...
- C#版(打败99.28%的提交) - Leetcode 347. Top K Frequent Elements - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- C++版 - 剑指Offer 面试题35:第一个只出现一次的字符 解题报告(华为OJ034-找出字符串中第一个只出现一次的字符)
面试题35:第一个只出现一次的字符 题目:在一个字符串中找到第一个只出现一次的字符.如输入abaccdeff,则输出b.(2006年google的一道笔试题.) 分析: 首先应向确认一下是ASCII字 ...
- Python的魔法函数
概要 如何定义一个类 类里通常包含什么 各个部分解释 类是怎么来的 type和object的关系 判断对象的类型 上下文管理器 类结构 #!/usr/bin/env python # -*- codi ...
- MySQL 个人学习笔记
最早之前学习了Mysql,不知道是多长时间了 O(∩_∩)O,今天突然发现之前学习过程中的这个笔记,于是,就分享给大家,希望,能帮助到有需要的朋友,有不足的地方欢迎大家多多交流 b( ̄▽ ̄)d 1. ...
- 补习系列(9)-springboot 定时器,你用对了吗
目录 简介 一.应用启动任务 二.JDK 自带调度线程池 三.@Scheduled 定制 @Scheduled 线程池 四.@Async 定制 @Async 线程池 小结 简介 大多数的应用程序都离不 ...
- Perl多线程(2):数据共享和线程安全
线程数据共享 在介绍Perl解释器线程的时候一直强调,Perl解释器线程在被创建出来的时候,将从父线程中拷贝数据到子线程中,使得数据是线程私有的,并且数据是线程隔离的.如果真的想要在线程间共享数据,需 ...