我认知的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"
        }
        debugger
        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"
        }
        debuggerc
        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;//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能绑定传递的参数,也可以不绑定参数

好吧,函数的调用到这儿就写完了,希望对大家有所帮助,不再之处,还望海涵,谢谢。

时间: 2024-08-11 05:44:36

我认知的javascript之函数调用的相关文章

javascript中函数调用,函数实例化,函数三者关系

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" ></script> <script type="text/javascript"> // a

Javascript中函数调用和this的关系

例子先行: var myObject={ foo:"bar", func:function(){ var self=this; console.log("outerfunc:this.foo="+this.foo); console.log("outerfunc:self.foo="+self.foo); (function(){ console.log("innerfunc:this.foo="+this.foo); con

JavaScript 函数—函数调用

JavaScript 函数有 4 种调用方式. 每种方式的不同在于 this 的初始化. 一.作为一个函数调用 以上函数不属于任何对象.但是在 JavaScript 中它始终是默认的全局对象. 在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面.在浏览器中的页面对象是浏览器窗口(window 对象).以上函数会自动变为 window 对象的函数. myFunction() 和 window.myFunction() 是一样的: 二.函数作为方法调用 注:函数作为

Javascript的函数调用详解

可能很多人在学习 JavaScript过程中碰到过函数参数传递方式的迷惑,本着深入的精神,我想再源码中寻找些答案 不过在做这件事之前,首先明确几个概念.抛弃掉值传递.引用传递等固有叫法,回归英文: call by reference && call by value && call by sharing 分别是我们理解的 C++ 中的引用传递,值传递.第三种比较迷惑,官方解释是 receives the copy of the reference to object .我用

javascript函数调用的各种方法!!

在JavaScript中一共有下面4种调用方式: (1) 基本函数调用 (2)方法调用 (3)构造器调用 (4)通过call()和apply()进行调用 1. 基本函数调用 普通函数调用模式,如: JavaScript code? 1 2 3 4   function fn(o){      --    }   fn({x:1}); 在基本函数调用中, (1)每个参数作为实参传递给声明函数时定义的形参: (2)this被绑定到全局变量(直接调用一般指的是window) JavaScript co

JavaScript函数,作用域以及闭包

JavaScript函数,作用域以及闭包 1. 函数 (1). 函数定义:函数使用function关键字定义,它可以用在函数定义表达式或者函数声明定义. a. 函数的两种定义方式: * function functionName() {} * var functionName = function(){} b. 两种函数定义不同之处 1). 声明提前问题 函数声明语句   :声明与函数体一起提前 函数定义表达式 :声明提前,但是函数体不会提前 请看下面图示:绿色线上面实在js初始加载的时候,查看

JavaScript权威设计--JavaScript函数(简要学习笔记十一)

1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScript构造函数调用的语法是允许省略实参列表和圆括号的. 如: var o=new Object(); //->等价于 var o=new Object; 第四种:使用call()与apply()间接调用(放在后面详细说明) 2.函数的实参与形参——可选形参 先看一个例子: function getA(

《JavaScript权威指南》拾遗(上)

一.语言基础 1.javascript中,只有null和undefined是无法拥有方法的值,它们都没有包装对象.typeof null == ‘object' , typeof undefined =='undefined' 2.在javascript运算中,上溢返回infinity,下溢返回0,也就是说被0整除并不报错,而是返回无穷大.而0/0返回NaN. 3.NaN的特殊性,它和任何值都不相等,也就是说,没法通过x==NaN来判断x是否是NaN,只能通过x!=x来判断,函数isNaN()的

函数调用的四种方式

在JavaScript中一共有4种调用模式: 函数调用模式 方法调用模式 构造器调用模式 间接调用模式,通过call()和apply()进行 1. 函数调用模式 普通函数调用模式,如: function printProps(o){ -- } printProps({x:1}); 在一个调用中, (1)每个参数表达式计算的结果作为实参传递给声明函数时定义的形参: (2)this被绑定到全局变量 var myObject = {value:1}; value = 2; myObject.print