<!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. nodelet的应用

    1.创建一个包,如example_pkg catkin_create_pkg example_pkg 2.创建MyNodeletClass.h文件 cd ~/catkin_ws/src/example ...

  2. C#中的异步编程Async 和 Await

    谈到C#中的异步编程,离不开Async和Await关键字 谈到异步编程,首先我们就要明白到底什么是异步编程. 平时我们的编程一般都是同步编程,所谓同步编程的意思,和我们平时说的同时做几件事情完全不同. ...

  3. 跨库连接报错Server 'myLinkedServer' is not configured for RPC

    Solution: Problem is most likely that RPC is not configured for your linked server. That is not a de ...

  4. bootstrap强调类名

    1.   .lead .lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; } @medi ...

  5. cbv+resful+APIView源码分析

    CBV源码分析 1概念:什么是cbv和fbv 已经什么是API class bass View ---基于类的视图 function bass View ---基于函数的视图 API(Applicat ...

  6. redis的一些简介

    Redis是Remote Dictionary Server的缩写,他本质上一个Key/Value数据库,与Memcached类似的NoSQL型数据库. 1.       redis的数据类型: st ...

  7. Java 线程不安全问题分析

    当多个线程并发访问同一个资源对象时,可能会出现线程不安全的问题 public class Method implements Runnable { private static int num=50; ...

  8. C#分布式存储演练（提供项目下载）

    C#简单的演练了一下分布式的存储,学习fastdns的结构,Client向ProcessCenter请求Storage的服务,然后上传文件. 分布式服务就是多个服务器作为客户端互相[配合],要中心化就 ...

  9. 【大数据之数据仓库】HAWQ versus GreenPlum

    谈到GreenPlum,肯定会有同事说HAWQ!是的,在本系列第一篇选型流水记里,也有提到.因为对HAWQ接触有限,没有深入具体了解,所以很多信息都是来自于博文,人云亦云,我把看过的资料简要整理,希望 ...

  10. springMVC+spring+mybatis多数据源配置

    1.application.properties配置 <?xml version="1.0" encoding="UTF-8"?> <bean ...