<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//第一个用途:函数上下文模式改变this的指向
var age=19;
function fun() {
console.log(this.age);
} var obj={
age:26
};
fun.apply(obj);
fun.call(obj)
//总结:apply和call,第一个参数功能都是一样,都是可以改变this指向为第一个参数对象。
//当传递对象为null的时候,为window调用 //应用1:将参数用“-”拼接
function fun2() {
//arguments是一个伪装数组,不能调用join方法,通过apply转换替代对象来调用
console.log(Array.prototype.join.apply(arguments, ["-"]));
console.log(Array.prototype.join.call(arguments, "-"));
}
fun2(1,2,3,4); //应用4:借用构造函数实现继承
function Persion() {
this.name="张三";
this.age=18;
}
function Student() {
Persion.apply(this);
}
var stu=new Student();
console.log(stu); //第二个用途:第二个到第N个参数的处理
function fun1(name,work) {
console.log("名字为"+name+";年龄为"+this.age+"职业"+work);
}
var obj1={
age:30
};
/*
* apply和call第二个参数都是函数的参数
* apply是传递的数组,执行的时候是将数组遍历然后作为参数传递。
* call传递的是分开的参数
* */
fun1.apply(obj1,["张三","金融"]);
fun1.call(obj1,"张三","金融"); //应用2:apply的遍历
window.onload=function () {
var divs=document.querySelectorAll("div");
var spans=document.querySelectorAll("span");
var arr=[];
arr.push.apply(arr,divs);
arr.push.apply(arr,spans); for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor="red";
}
} //应用3:求最大值
var arr1=[3,6,1,78,23];
console.log(Math.max.apply(null, arr1));
</script>
<style>
div,span{
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>

js的apply和call的更多相关文章

  1. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  2. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

  3. js中apply,call的用法

    最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...

  4. JS之apply,call,bind区别

    为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...

  5. js call apply bind简单的理解

    相同点:JS中call与apply方法可以改变某个函数执行的上下文环境,也就是可以改变函数内this的指向.区别:call与apply方法的参数中,第一个参数都是指定的上下文环境或者指定的对象,而ca ...

  6. js的apply()与call()的区别

    1.各自对应的不同的语法: /*apply()方法*/ function.apply(thisObj[, argArray]) /*call()方法*/ function.call(thisObj[, ...

  7. JS中apply和call的区别和用法

    Javascript中有一个call和apply方法,其作用基本相同,但是它们也有略微不同的地方. JS手册中对call方法的解释是: call方法:调用一个对象的一个方法,以另一个对象替换当前对象. ...

  8. js中apply的用法(转)

    之一------(函数的劫持与对象的复制)关于对象的继承,一般的做法是用复制法: Object.extend见protpotype.js 的实现方法: Object.extend = function ...

  9. 关于JS call apply 对象、对象实例、prototype、Constructor、__proto__

    关于call与apply的理解容易让人凌乱,这里有个方法可供参考 tiger.call(fox,arg1,arg2...) tiger.apply(fox,[arg1,arg2...]) 理解为 fo ...

  10. JS中apply与call的用法

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象. cal ...

随机推荐

  1. 构建使用 Azure 网站的云

    Apurva JoshiSunitha Muthukrishna 在设计云解决方案时,设计始终要为故障做好准备.这一点很重要,应牢记. 然而,许多应用程序并非按照这种方式构建. 出现这种情况的主要原因 ...

  2. DataTable与结构不同实体类之间的转换

    在实际开发过程中,或者是第三方公司提供的数据表结构,与我们系统中的实体类字段不对应,遇到这样我们怎么处理呢?可能有人会说,在转换时创建一个实体对象,对表里的数据逐行遍历来实例化这个实体对象不就完了.的 ...

  3. Git教程--廖雪峰

    Git简介 1.Git是目前世界上最先进的分布式版本控制系统(没有之一) 2.集中式和分布式版本控制系统有什么区别呢?      区别在于历史版本维护的位置:Git本地仓库包含代码库还有历史库,在本地 ...

  4. layui之弹出层--从父窗口传递数据到子窗口

    原文链接:https://blog.csdn.net/Code_shadow/article/details/80524633 var Index = layer.open({ title: &quo ...

  5. vs2015+opencv3.3.1 实现 c++ 灰度高斯滤波器

    #include <opencv2\highgui\highgui.hpp> #include <iostream> #include<vector> using ...

  6. ajaxfileupload 跨域 (二级域名) 可行办法

    ajaxfileupload 跨二级域名 如 aa.fei.com 到 bb.fei.com 是可行的. 1.首先在html页面 ajaxfileupload上方加入 document.domain= ...

  7. shipyard

    https://www.ivankrizsan.se/2016/07/10/managing-containers-shipyard/ kubernetes中文社区:https://www.kuber ...

  8. CentOS 6.9下PXE+Kickstart无人值守安装操作系统

    一.简介 1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持 ...

  9. 【leetcode 144. 二叉树的前序遍历】解题报告

    前往二叉树的:前序,中序,后序 遍历算法 方法一:递归 vector<int> res; vector<int> preorderTraversal(TreeNode* roo ...

  10. 一大波趣图:CSS的力量

    CSS的力量         CSS的作用,一目了然~     见识一下CSS的厉害!   用了CSS,效果显著   HTML5 + CSS3 + Javascript会怎么样?       HTML ...