<!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. sql server 复制常见问题及查看

    1.SQL Server同步复制问题排查方法http://blog.csdn.net/roy_88/article/details/41481059 2.[同步复制常见错误处理1]当IDENTITY_ ...

  2. linux常用文件

    /etc/redhat-release /etc/hostname /etc/ssh/sshd_config /proc/meminfo /etc/issue 查看系统版本号 /etc/rc.d/rc ...

  3. 百度接口test

    https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Mk2Orf5pqEOXvYR ...

  4. LaTeX使用学习

    LaTeX是什么? 文档结构 标点符号 行内公式$\oint\sqrt{a}$ 行间公式 \begin{equation}\label{a}\oint\sqrt{a}\end{equation}

  5. resful规范

    1.简介 什么是resful resful是一个规范,说白了就是面向资源编程,把网络中所有的东西,想象成资源 2.规范 10条规范 1)API与用户的通信协议,总是用HTTPS协议:HTTPS比htt ...

  6. [django]http请求

    请求参数 http基本认证 https://zxc0328.github.io/2015/11/04/http-basic-auth/ 我们看到在http请求的header里有一个Authorizat ...

  7. [Java in NetBeans] Lesson 05. Method/function

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: Define a method:(motivation: write one time, but use it many times ...

  8. react 使用 redux 的时候 用 ref获取子组件的state

    由于 redux是无状态的,所以当我们在子组件中使用了 redux的时候,再父组件中,使用  ref 来获取子组件的state时,发现为一个空对象. 其实这个是有解决方案法的,原因在于 我们使用的 r ...

  9. js树形结构-----（BST）二叉树增删查

    function BinarySearchTree(){ var cnodes = function(key){ this.key = key; this.left = null; this.righ ...

  10. 编译snort经验

    google搜索,找个感觉挺新的版本 https://zh.osdn.net/frs/g_redir.php?m=netix&f=%2Fslackbuildsdirectlinks%2Fsno ...