js种函数调用的四种方式

函数调用

this指向:window

返回值  :由return值决定,如果没有return语句就表示没有返回值

案例1:
function f1() {
    console.log(this);
}
f1();       //window
案例2:
function f2() {
    return function () {
        console.log(this);
    }
}
var f2n = f2();
f2n();               //this-->window  这也是一次函数调用模式
案例3:
functioon f3() {
    f3n();        //函数的调用模式--->window
    function f3n() {
        console.log(this);
    }
}
f3();

  

方法调用

this指向:该方法的调用者

返回值  :由return语句决定

   代码1:
    var obj={
        age:10,
        say:function(){
            console.log(this.age);
        }
    };
    obj.say();//方法调用模式
    代码2:
    function f1(){
        console.log(this);
    }
    var obj2={
        s1:f1//将f1函数的值赋值给obj2.s1属性
    };
    obj2.s1();//方法调用模式——>this:obj2
    代码3:
    var obj3={
        age:10,
        s1:function(){
            console.log(this.age);
        }
    };
    var obj4={
        age:20,
        s2:obj3.s1//将obj3.s1函数的值赋值给s2属性
    };
    obj4.s2();//方法调用模式:this——>obj4
    function f5(){
    }
    var a1=f5();//undefeind
    var a2=f5;//a2是一个函数

  

构造函数调用

this指向:当前构造函数创建的对象

返回值  :   a、没有手动添加返回值,默认返回this

b、return了一个基本数据类型(数字、布尔值、null、undefined),最终返回this

c、return了一个复杂数据类型(对象),最终返回该对象

    代码1:
    function Person() {
        this.age = 20;
        this.name = "张三";
        console.log(this);
    }
    //构造函数调用模式:
    var p1 = new Person(); //打印出该实例 Person {age: 20, name: "张三"}
    代码2;
    function P2() {
        this.age = 18;
        return "abc";
    }
    var p2 = new P2();
    console.log(p2); //P2 {age: 18}
    代码3:
    function P3() {
        this.age = 10;
        return {};
    }
    var p3 = new P3();
    console.log(p3); //Object {}
    console.log(p3.age);//undefined
    代码4:
    function P4() {
        this.age = 10;
        return [1, 3, 5];
    }
    var p4 = new P4();
    console.log(p4);//[1, 3, 5]
    console.log(p4.age);//undefined

  

上下文调用

call和apply 是方法, 是所有函数都具有的方法。 Function.prototype

只要函数调用call/apply 方法,那么该函数就会立即执行。

this指向:   a、传递一个null/undefined------------------->window

b、传递一个数字、字符串、布尔值------->对应的基本包装类型的对象

c、传递一个对象------------------------------->指向该对象

返回值  :由return语句决定

    function f1(){
        console.log(this);
    }
    //上下文模式
    f1.call(null);          //window
    f1.call(undefined);     //window
    f1.call(1);             //Number的实例
    f1.call("abc");         //String的实例
    f1.call(true);          //Boolean的实例
    var s1="abc";           //代码内部创建了字符串所对应的String构造函数的实例
                            //        {0:"a",1:"b",2:"c",length:3}
                            //代码执行完毕之后,就会把这个实例给销毁
    console.log(s1.length); //3
    console.log(s1[0]);     //"a"

  

时间: 2025-01-01 20:43:18

js种函数调用的四种方式的相关文章

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

第164天:js方法调用的四种模式

js方法调用的四种模式 1.方法调用模式 1 function Persion() { 2 var name1 = "itcast", 3 age1 = 19, 4 show1 = function() { 5 console.log(this.name); 6 }; 7 8 return { 9 age : age1, 10 name : name1, 11 show : show1 12 }; 13 } 14 15 var p = new Persion(); 16 p.show(

js动态引入的四种方式

index.html [html] view plaincopy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html;charset=utf-8" http-equiv=&qu

JS函数调用的四种方法

js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方法调用模式 函数调用模式 构造器调用模式 apply调用模式 下面我们来看看一些实例更好理解. 1:方法调用模式. 请注意this此时指向myobject. /*方法调用模式*/    var myobject={            value:0,            inc:functio

js中this的四种调用模式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

JS 获取星期几的四种写法

今天是星期几的4种JS代码写法,有需要的朋友可以参考一下 第一种写法 复制代码代码如下: var str = "";  var week = new Date().getDay();  if (week == 0) {          str = "今天是星期日";  } else if (week == 1) {          str = "今天是星期一";  } else if (week == 2) {          str =

js数组去重的四种方法

//第一种方法 Array.prototype.removeDuplicate = function() { var n = []; for (var i = 0; i < this.length; i++) { if (n.indexOf(this[i]) == -1) { n.push(this[i]); } } return n; } var arr = [1, 2, 3, 3, 2, '我', '我', 34, '我', NaN, NaN]; var m1 = arr.removeDup

【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2203.html 本文是RN(React Native)系列教程第一篇,当然也要给自己的群做个广告:   React Native @Himi :126100395  刚创建的群,欢迎一起学习.讨论.进步. 本文主要讲解两点: 1.   PanResponder:触摸事件,用以获取用户手指所在屏幕的坐标(x,y)或触

函数调用的四种方式

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