<!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. [GO]随机生成切片元素并使用冒泡排序方式进行排序

    package main import ( "math/rand" "time" "fmt" ) func ButtleData(s []i ...

  2. sql从简单到高级

    Ø 基本常用查询 --select select * from student; --all 查询所有 select all sex from student; --distinct 过滤重复 sel ...

  3. poj2002 Squares(hash+折半枚举)

    Description A square is a 4-sided polygon whose sides have equal length and adjacent sides form 90-d ...

  4. [转]FreeMarker使用

    copy自http://demojava.iteye.com/blog/800204 以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主 ...

  5. C# 类型初始化（Type initialization）

    这些天突然看到一些大虾门写的有关类型初始化的文章.那种感觉真叫跌宕起伏啊. 博文地址如下,自己慢慢体会吧! 起步:http://www.cnblogs.com/artech/archive/2008/ ...

  6. duilib入门简明教程 -- 响应按钮事件(4)

       上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI;     也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍 ...

  7. WebStrom背景色设置

    Ctrl Alt S快速打开setting:

  8. 【BZOJ3589】动态树 树链剖分+线段树

    Description 别忘了这是一棵动态树, 每时每刻都是动态的. 小明要求你在这棵树上维护两种事件 事件0: 这棵树长出了一些果子, 即某个子树中的每个节点都会长出K个果子. 事件1: 小明希望你 ...

  9. 洛谷P4014 分配问题（费用流）

    传送门 可以把原图看做一个二分图,人在左边,任务在右边,求一个带权的最大和最小完美匹配 然而我并不会二分图做法,所以只好直接用费用流套进去,求一个最小费用最大流和最大费用最大流即可 //minamot ...

  10. 对于自我管理 ObjectContextManager的测试

    书接上文, 把代码改为多线程, public class Threads {   public static void allStart() { for (int i = 0; i < 10; ...