<!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. Docker镜像推送（push）到Docker Hub

    镜像构建成功后,只要有docker环境就可以使用,但必须将镜像推送到Docker Hub上去.我们之前创建的镜像不符合Docker Hub的tag要求,因为 在Docker Hub注册的用户名是boo ...

  2. linux md5sum命令

    md5sum命令用于生成和校验文件的md5值 生成文件md5值 [root@cdncenter ~]# ll total -rw-r--r-- root root Oct : .txt -rw-r-- ...

  3. urllib2 python3错误？用from urllib import request来代替！

    今天ytkah在一个python3项目要引用urllib2,可是提示ImportError: No module named 'urllib2'错误了.原来是urllib2可以在python2.x适用 ...

  4. SQL Server的等待事件

    具体查看: https://www.sqlshack.com/sql-server-wait-types/ 早上10:00, 公司的订单数据更新缓慢,查看了监控的sql信息,有大量的HADR_SYNC ...

  5. shell编程awk进阶

    awk操作符 算术操作符:  x+y, x-y, x*y, x/y, x^y, x%y      -x: 转换为负数      +x: 转换为数值 字符串操作符:没有符号的操作符,字符串连接 赋值操作 ...

  6. 015-线程同步-synchronized几种加锁方式、Java对象头和Monitor、Mutex Lock、JDK1.6对synchronized锁的优化实现

    一.synchronized概述基本使用 为确保共享变量不会出现并发问题,通常会对修改共享变量的代码块用synchronized加锁,确保同一时刻只有一个线程在修改共享变量,从而避免并发问题. syn ...

  7. 003-RFC关于媒体类型说明

    一.概述 RFC-822   Standard for ARPA Internet text messages [ARPA互连网文本信息标准]RFC-2045 MIME Part 1: Format ...

  8. Django-分页、中间件和请求的声明周期

    一.分页 相关连接:https://www.cnblogs.com/kongzhagen/p/6640975.html 一.Django的分页器(paginator) 1.view.py 视图 fro ...

  9. tf实现LSTM时rnn.DropoutWrapper

    转自:https://blog.csdn.net/abclhq2005/article/details/78683656 作者:abclhq2005 1.概念介绍 所谓dropout,就是指网络中每个 ...

  10. Flask框架从入门到实战

    Flask简介: Flask是一个使用 Python 编写的轻量级 Web 应用框架,基于 WerkzeugWSGI工具箱和 Jinja2模板引擎.使用 BSD 授权. Flask也被称为 " ...