<!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. MongoDB pymongo模块 删除数据

    使用user集合,删除user集合的数据 import pymongo mongo_client = pymongo.MongoClient( host='192.168.0.112', port=2 ...

  2. Laravel展示产品-CRUD之show

    上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller,文件是在/app/Http/Control ...

  3. css继承样式怎么控制?用选择器

    css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...

  4. Redis入门到高可用（十一）—— 慢查询

    一.慢查询日志 慢查询日志帮助开发和运维人员定位系统存在的慢操作.慢查询日志就是系统在命令执行前后计算每条命令的执行时间,当超过预设阀值,就将这条命令的相关信息(慢查询ID,发生时间戳,耗时,命令的详 ...

  5. PLSQL的SQL%NOTFOUND的使用场景

    SELECT * INTO v_ticketStorageRow FROM BDM_TICKET_STORAGE WHERE p_startTicketNo >= START_NO_ AND p ...

  6. iOS 新浪微博-5.0 首页微博列表

    首页显示微博列表,是微博的核心部分,这一章节,我们主要是显示出微博的列表. 导入第三方类库 pod 'SDWebImage', '~> 3.7.3' pod 'MJRefresh', '~> ...

  7. Asp.net Core认证和授权：Cookie认证

    关于asp.net core 的文章,博客园已经有很多大牛写过了. 这里我只是记录下自己在学习中的点滴和一些不懂的地方 Cookie一般是用户网站授权,当用户访问需要授权(authorization) ...

  8. winform下picturebox控件显示图片问题

    viewData_pictureBox.SizeMode=PictureBoxSizeMode.StretchImage;图片会自动按照比例缩放来完全显示在你的PictureBox中.

  9. Django后台管理系统讲解及使用

    大家在创建Django项目后,在根路由urls.py文件中,会看到一行代码 from django.contrib import admin urlpatterns = [ url(r'^admin/ ...

  10. python3 TypeError: a bytes-like object is required, not 'str'

    在学习<Python web开发学习实录>时, 例11-1: # !/usr/bin/env python # coding=utf-8 import socket sock = sock ...