## 函数的四种调用模式
1.函数模式
    this--->window
 function test(){
console.log(this);
}
test();

2.方法模式
    this---->调用方法的对象

var obj1 = {
test:function(){
console.log(this);
}
}
obj1.test();

3.构造函数模式
    this----->new出来的对象

function Person(){
console.log(this);
}
var obj =new Person();

工厂模式

function Person(name,age){
var o = {
name:name,
age:age,
sayHello:function(){ }
}
return o;
} var p = Person("张三", 18);
console.log(p); //object
//简单工厂模式的构造函数 创建出来的对象 跟该构造函数无关
//简单工厂模式的构造函数,实际的调用模式是 函数模式

寄生模式

function Person(name,age){
var o = {
name:name,
age:age,
sayHello:function(){ }
}
return o;
} var p = new Person();

4.上下文模式(context执行环境的意思)
    this----->指定的是谁就是谁 此模式下可以修改this的值,也就是说可以修改函数的调用方式。
修改方式:    

    call   函数.call(对象,arg1,arg2,arg3,...argn)
    apply  函数.apply(对象,数组)
        都可以用来改变this的指向为参数的第一个值
        call是使用单独的每一个参数来传参
        apply是使用数组进行传参的,这个数组在调用的时候,会被意义拆解,当做函数的每一个采参数
    call在函数的形参个数确定的情况下使用
    apply在函数的形参个数不确定的情况下使用

上下文:

//案例:求一个数组中的最大值
var arr = [9, 1, 4, 10, 7, 22, 8];
//apply方法和call方法第一个参数传递null的时候,都表示为函数调用模式
//也就是将this指向window
var max = Math.max.apply(null, arr);
console.log(max); //案例:将传入的参数打印,参数之间用-相互连接
function foo() {
// return arguments.join("-"); //伪数组不具有join方法,所以这个时候就要考虑去借用一下数组的join方法
// var str = Array.prototype.join.apply(arguments,["-"]);
var str = [].join.apply(arguments,["-"]);
return str;
}
var str = foo(1, 3, "abc", "ffff", 99) // 1-3-abc-ffff-99
console.log(str); // var arr = [1,2,3,4];
// console.log(arr.join("-")); window.onload = function () {
//案例:给页面上所有的 div 和 p 标签添加背景色
var divs = document.getElementsByTagName("div");//divs是伪数组
var ps = document.getElementsByTagName("p"); var arr = [];
//little tip: push方法可以传多个参数
//arr.push(1,2,3,4,4,5) arr.push.apply(arr,divs);
arr.push.apply(arr,ps); //如果使用arr.push()直接把divs传进来
//那么相当于在arr中的第一个元素中存储了一个divs数组
//但是我们需要把divs中的每一个元素单独的存入arr中
//所以需要调用push方法的如下形式 push(1,2,4,4,5)
//要实现这个形式的调用,就用到了apply方法的第二个参数的特性
//在调用的时候,会第二个参数的数组,拆成每一个元素以(a,b,c,d,e,f,g) 传入函数 //相当于 arr.push(divs[0],divs[1],divs[..])
// arr.push(divs)
for (var k = 0; k < arr.length; k++) {
var ele = arr[k];
ele.style.backgroundColor = "yellow";
}

函数调用模式,this指向的更多相关文章

  1. get和post请求及函数调用模式

    1.get和post请求的应用场景? get: 1.get请求获取(查询)数据 2.请求url长度比较短 3.可以被缓存 4.请求url可以作为浏览器书签 5.可以被保存在浏览器记录中 6.请求参数在 ...

  2. js函数调用模式总结

    在javascript中一共有四种调用模式:方法调用模式.函数调用模式.构造器调用模式和apply调用模式.这些模式在如何初始化关键参数this上存在差异 方法调用模式 当一个函数被保存为对象的一个属 ...

  3. JavaScript 方法调用模式和函数调用模式

    这两天在读<JavaScript语言精粹>关于第4章函数调用的几种模式琢磨了半天. 这里就说一下方法调用模式跟函数调用模式. 方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为 ...

  4. js函数调用模式

    1.函数调用 调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数.除了函数声明时定义的形参,每个函数还接受两个附加的参数:this和arguments(arguments并不是一个真正的数组, ...

  5. JavaScript函数调用模式

    1.方法调用模式: var myObj = { value : 0; increment:function(inc){ this.value += typeof inc === 'number' ? ...

  6. JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

    1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log(“try”)  出现异 ...

  7. 前端试题本(Javascript篇)

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  8. JavaScript的this用法

    1. 全局代码中的this this在全局上下文中,它的值是全局对象本身(Global Object),在浏览器中就是Window  Object,如下图示. 看下面几个例子: //Global sc ...

  9. 2018 BAT最新《前端必考面试题》

    2018 BAT最新<前端必考面试题> 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文 ...

随机推荐

  1. Python语言——Python语言概述

    Python语言概述 计算机语言概述 语言:交流工具,沟通媒介 计算机语言:人和计算机交流的工具,翻译官 Python语言简述 Python是计算机语言的一种 Python编程语言: 代码:人类语言, ...

  2. platform怎么实现数据数据和驱动分离

    一些重要的结构体: struct platform_device { const char * name; int id; struct device dev; u32 num_resources; ...

  3. JQuery选择器,动画,事件和DOM操作

    JQuery是由JS封装的一些方法,供我们调用,可以快速的实现某些JS功能,实际是JS编写的方法包 将JQuery文件放到JS文件夹下,然后引用到<head></head>中 ...

  4. 微信小程序将网络图片转化为base64

    网络图片需用wx.downloadFile下载,然后调用微信自带的base64转化 可能会存在兼容, let image_to_base64 = function(img){ return new P ...

  5. 基于Zookeeper实现多进程分布式锁

    一.zookeeper简介及基本操作 Zookeeper 并不是用来专门存储数据的,它的作用主要是用来维护和监控你存储的数据的状态变化.当对目录节点监控状态打开时,一旦目录节点的状态发生变化,Watc ...

  6. 2018-2019-2 网络对抗技术 20165305 Exp6 信息搜集与漏洞扫描

    1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具 ...

  7. linux单项目发布流程

    1.安装python #1.安装python3.7所需要的依赖包yum -y groupinstall "Development tools"yum -y install zlib ...

  8. Java包装类之Integer的 "==" 判断数值是否相等的陷阱及原因分析

    在好久以前的一次面试中,面试官问了我这么一个问题:“现在有 Integer a = 56, b = 56, c = 180, d = 180;  请问:a == b ,c == d  是否成立,也就是 ...

  9. Liunx网络技术管理及进程管理

    Linux网络技术管理及进程管理(week2_day4)   OSI七层模型和TCP/IP四层模型 OSI七层模型:OSI(Open System Interconnection)开放系统互连参考模型 ...

  10. C语言解析WAV音频文件

    C语言解析WAV音频文件 代码地址: Github : https://github.com/CasterWx/c-wave-master 目录 前言 了解WAV音频文件 什么是二进制文件 WAV的二 ...