<!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. 黑盒测试实践--Day6 11.30

    黑盒测试实践--Day6 11.30 今天完成任务情况: 应用设计的场景用例,完成测试用例的编写 完成测试用例在自动化测试工具QTP上的测试 分析测试结果得到缺陷报告 小靳 软件测试 今天主要钻研了q ...

  2. Hyper-V和vmware在虚拟机中安装xen总结

    1. Hyper-V 在hyper-v中安装了ubuntu13.04,运行很好,使用起来的效果感觉比vmware要舒服.安装变异xen的内核也没有问题,可以正常的安装,update-grub之后也可以 ...

  3. HDU 3362 Fix （状压DP）

    题意:题目给出n(n <= 18)个点的二维坐标,并说明某些点是被固定了的,其余则没固定,要求添加一些边,使得还没被固定的点变成固定的, 要求总长度最短. 析:由于这个 n 最大才是18,比较小 ...

  4. clojure-emacs-autocomplete

    1. https://github.com/clojure-emacs/cider#keyboard-shortcuts 2. install emacs 24.5 3. http://clojure ...

  5. ASP.NET中Service接受前端单个及多个数据的写法

    MVC中的Service主要是用来处理数据交互的. 前端页面传递一个或者多个参数到Service的写法: 一个参数写法: public DataTable 方法名 (Pagination pagina ...

  6. （转）QueryBuilder ： 打造优雅的Linq To SQL动态查询

    原文地址:http://www.cnblogs.com/coolcode/archive/2009/09/28/IQueryBuilder.html 首先我们来看看日常比较典型的一种查询Form 这个 ...

  7. 积分之谜——第六届蓝桥杯C语言B组（国赛）第一题

    原创 标题:积分之迷 小明开了个网上商店,卖风铃.共有3个品牌:A,B,C. 为了促销,每件商品都会返固定的积分. 小明开业第一天收到了三笔订单: 第一笔:3个A + 7个B + 1个C,共返积分:3 ...

  8. C++初始化，之不明白篇 cout<<x<<endl 与 cout<<"x = "<<cout<<x<<endl的输出的值会不一样

    代码如下 #include <iostream> using namespace std; class point { public :     int x;     int y;     ...

  9. 安卓开发时访问google方法

    启动浏览器后15秒左右,浏览器的右上角就会出现图标 启用防火墙功能(右上角墙形图标),这时候程序就会去寻找网上代理,从而达到访问GOOGLE的效果,提示如果不访问google网站,可再点击一下关闭防火 ...

  10. P - 区间与其他数互质数的个数 HDU - 4777

    Rabbit Kingdom Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...