<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-apply和call方法</title>
<script>

// apply和call方法
// 作用：可以设置函数的具体调用者，来修改函数的作用域
// 第一个参数：就是指的是函数的调用者
var color = 'green';
var getColor = function(){
var color = 'blue';
console.log(color);
console.log(this.color);
}
// getColor();
// window.getColor();
// getColor.apply(this);
// getColor.call(this);

var obj1 = {
color:'yellow'
};
// 相当于obj1来调用getColor
// getColor.apply(obj1);
// getColor.call(obj1);

var obj2 = {
color:'red',
}
// 把getColor这个函数赋给obj2对象的属性abc
// 如果obj2中有abc属性，那么下面的语句会修改abc属性，如果obj2中没有abc属性，那么就为obj2添加一个abc属性
obj2.abc = getColor;
// 调用obj2的abc属性
// obj2.abc();

function sum (num1,num2){
return num1 + num2;
}

var result1 = sum(1,2);
// console.log(result1);
// apply方法传递调用函数的参数，需要使用数组，或者是类数组
var result2 = sum.apply(this,[1,2]);
console.log(result2);

function callSum (num3,num4){
return sum.apply(this,arguments);
}
var result3 = callSum(2,3);
console.log(result3);

// call方法传递调用函数的参数，是要一个一个的把实参传递进去
var result4 = sum.call(this,5,8);
console.log(result4);

// 总结：apply和call方法：
// 第一个参数类似，之后的参数不同。

</script>
</head>
<body>

</body>
</html>

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建对象</title>

</head>
<body>
</body>
<script>

var xiaoming = {
name:"小明",
desc:function(v1, v2){
console.log("我叫"+this.name+v1+v2);
}
}
var xiaogang = null;
xiaogang = {};
xiaogang.name = "小刚";

xiaoming.desc("xxxx", "yyyyy");
// call/apply可以改变方法或者函数的调用者，method/functon.call(调用者,var1,var2,var3.....)
xiaoming.desc.call(xiaogang, "aaaa", "bbbb");
xiaoming.desc.apply(xiaogang, ["iiii", "jjjj"]);

// 一个正常的构造器
function Person(name, age) {
this.home = "保护地球，人人有责！";
this.name = name;
this.age = age;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}

var p1 = new Person("小红", 20);
p1.desc();

function Student() {
// Person.call(this, "小军", 22);
// Person.apply(this, ["小军", 22]);
Person.apply(this, arguments)
this.school = "青云学院";
this.study = function(){
console.log(this.name+"在"+this.school+"学习WEB前端编程技术！");
}
// this.desc = function(){
// console.log(this.name+"在"+this.school+"学习WEB前端编程技术！");
// }
}
var st1 = new Student("小军", 22);
st1.desc();
st1.study();

</script>
</html>

【JavaScript 6连载】四、apply和call的用法的更多相关文章

  1. Javascript中call和apply的区别和用法

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别.其实就是更改对象的内部指针,即改变对象的this指向的内容.这在面向对象的js编程过程中有时是很有用的.call ...

  2. javascript中call()、apply()、bind()的用法终于理解

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  3. （转）javascript中call()、apply()、bind()的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  4. JavaScript 中 call()、apply()、bind() 的用法

    "use strict"; ; var obj = { name:'小李', age:, getInfo(from, to) { console.log(arguments) co ...

  5. javascript中call()、apply()、bind()的用法理解

    一.bind的用法 第一个:obj.showInfo('arg','arg_18');中传的2个参数通过showInfo方法改变的是obj下中的name和age 第二个:obj.showInfo.bi ...

  6. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  7. Javascript函数调用的四种模式

    一 前言 Javascript一共有四种调用模式:方法调用模式.函数调用模式.构造器调用模式以及apply调用模式.调用模式不同,对应的隐藏参数this值也会不同. 二 方法调用模式 函数作为对象的属 ...

  8. 学习JavaScript之this,call,apply（转）

    转自: http://www.h5cn.com/js/jishu/2016/0128/17884.html 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们 ...

  9. 面试官：能解释一下javascript中bind、apply和call这三个函数的用法吗

    一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...

  10. JavaScript函数 bind call apply区别

    1. apply calll 在JavaScript中 call 和 apply 都是为了改变某个函数运行时上下文而存在的, 换句话说就是为了改变函数内部的this的指向. 这里我们有一个新的对象 b ...

随机推荐

  1. Python3学习之路~5.3 random模块

    random模块常用方法: import random # 随机数 print(random.random()) # 生成一个0到1的随机浮点数,0 <= n < 1.0 print(ra ...

  2. Java Script的用途(简介)

    1.可以用来写入HTML输出 <script> document.write("<h1>This is a heading</h1>");//标 ...

  3. Linux下搭建redis服务器

    1.redis需要gcc的编译环境,在线安装gcc:#  yum install gcc-c++ 2.上传redis的压缩包到Linux系统,解压 3.进入源码目录,编译(注意要有makefile), ...

  4. tf中的run()与eval()【转载】

    转自:https://blog.csdn.net/jiaoyangwm/article/details/79248535  1.eval() 其实就是tf.Tensor的Session.run() 的 ...

  5. 【Java】-NO.16.EBook.4.Java.1.012-【疯狂Java讲义第3版 李刚】- JDBC

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.012-[疯狂Java讲义第3版 李刚]-  JDBC Style:EBook Series:Java ...

  6. 2019.03.24 Ajax

    也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包   可以去网上搜腾讯网静态资源库 然后引入包    Ajax还是异步处理  处理堵塞问题  import time 就可以了 ...

  7. JS 8-2 再谈原型

    var bosn = new Student创建了Student的实例bosn.bosn的原型(__proto__)指向构造器Student的prototype属性. Student.prototyp ...

  8. MRJob 极速入门教程，使用Python玩转Hadoop

    想要Hadoop乖巧地运行Python程序,学习mrjob可能是最直接.最简单的方法了,你甚至都不要按安装部署Hadoop集群.mrjob拥有很多优秀的特性比如: 支持多步骤的MapReduce任务工 ...

  9. network error:software caused connection abort

    使用Putty链接阿里云香港服务器报这个错误. vim /etc/ssh/sshd_config 找到如下配置 #ClientAliveInterval 540 #ClientAliveCountMa ...

  10. 第一次java测试有感

    今天下午的Java测试体会深刻,真的可能我一暑假学的还没有今天一下午学的多.但通过今天一下午地与Java近距离接触 ,我感受到我与真正的Java距离还是特别远的.以后我的路还很长,我对Java仍然还是 ...