<!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. jQuery form 插件

    http://jquery.malsup.com/form/#getting-started 举例: $(document).ready(function() { $('#ff').ajaxForm( ...

  2. 编译boost，去掉不使用的组件

    说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而非.7z..zip或bz2包). 在当前目录 ...

  3. GTA4下载和玩教程

    侠盗猎车4中文版.rar: 但是下载安装之后总是在刚开始开车的时候跳转到人物界面卡在那里无法进行下去,解决办法: 1.新建一个commandline.txt文件复制以下内容进去 -novblank - ...

  4. ajax data参数

    表单 使用serializeArray获取所有: <form id='addForm' action='UserAdd.action' type='post'> <label for ...

  5. Dynamically loading unmanaged OCX in C#

    You'll have to perform a number of steps that are normally taken of automatically when you use the t ...

  6. 以太坊系列之七: p2p模块的dial--以太坊源码学习

    dial.go阅读手记 dial.go是负责和peer建立连接关系的地方,主要是实现 type dialer interface { /* peers已经有的结点 */ newTasks(runnin ...

  7. arp欺骗进行流量截获-2

    上一篇讲了原理,那么这一篇主要讲如何实现.基本上也就是实现上面的两个步骤,这里基于gopacket实现,我会带着大家一步步详细把每个步骤都讲到. ARP 欺骗 首先就是伪造ARP请求,让A和B把数据包 ...

  8. 模拟Springboot二:内置tomcat

    既然要将tomcat内置到项目中,并且能够成功的启动项目就要知道 tomcat  做了哪些事情 ,那么就必须先搞明白 一个 普通的web项目是如何被我们本地配置的tomcat启动并运行的 (1). 先 ...

  9. ubuntu没有权限（不能）创建文件夹（目录）

    可以在终端直接运行 sudo nautilus,弹出来的nautilus可以直接GUI操作,中途别关终端.如果遇到需要输入root密码,则输入root密码就可以启动这个图形界面了.

  10. js 封装常用方法

    1. 获取数据类型 function getType(params) { , -) } 2. 深拷贝 function deepCopy(params) { var obj; if (typeof p ...