JavaScript进阶【四】JavaScript中的this,apply,call的深入剖析-低调大师

JavaScript进阶【四】JavaScript中的this,apply,call的深入剖析

2018-03-20 529

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--this的使用-->
<!--(1)this的指向
作为对象的方法调用
作为普通函数调用
构造器调用
Function.prototype.call或Function.prototype.apply调用
-->
<!--1）this作为对象的方法调用
当函数作为对象的方法被调用时，this指向该对象：
-->
<script>
    var obj = {
        a: 1,
        getA: function () {
            alert(this == obj); // true
            alert(this.a);  //1
        }
    }
    obj.getA();

    // 2. 作为普通函数调用使用
    window.name = "gloabalName";
    var getName = function () {
        // 这哭的this指向的是window对象
        return this.name;
    }

    var myObject = {
        name: "xiuxiu",
        getNameA: function () {
            // 这里的this指向的是myObject 对象
            alert(this);  // window
            return this.name;
        }
    }

    console.log(getName());

    var a = myObject.getNameA;    //globalName
    //console.log(a); // xiuxiu
    console.log(a());


    var innerText = "我是全局变量的innerText";
    // callback方法的使用
    var button = document.createElement("button");
    button.innerText = "打开";
    button.id = "btn";
    document.body.appendChild(button);
    button.onclick = function (ev) {

        // 定义一个that , 让这个that指向button对象
        var that = this;

        // alert(this);  button
        // 这里的this指向的是触发这个事件的那个对象
        console.log(this.innerText);

        var callback = function () {
            // 这里的this指向的是window对象
            // 注意：在ES5的strict模式下，this已经被规定不会指向全局对象，而是undefined
            console.log(this.innerText);  //undifined

            // 这里的that 指向的是这个按钮对象， 不是window对象
            console.log(that.innerText);
        }
        callback();
    }


    //3. 构造器调用
    // 构造器里的this就指向返回的这个对象
    var myClass = function (name, sex) {
        this.name = name;
        this.sex = sex;

        alert(this.name + " " + this.sex);
    };
    var male = new myClass("xiaohong", "male");

    var myClass = function (name) {
        //console.log(this.name); //undifined
        this.name = name;

        console.log(this.name + " " + name);

        // 只有返回出去之后，这个name属性就会被外界修改
        return {
            name: "hahaha"
        }
    }
    var cls = new myClass("xiuxiu");
    alert(cls.name);


    // 4）Function.prototype.call和Function.prototype.apply调用
    // 跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态的改变传入函数的this
    var obj1 = {
        name: "xiuxiu",
        getName: function () {
            return this.name;
        }
    }
    var obj2 = {
        name: "Jack"
    }
    console.log(obj1.name); // xiuxiu
    console.log(obj1.getName.call(obj2));   // jack

    var obj3 = {
        myname: "seven",
        getName: function () {
            return this.myname;
        }
    }
    // 此时在调用this指向 obj3对象
    console.log(obj3.getName()); // seven


    // 修改this的指向
    // 这里是通过getname2这个普通函数区调用的， 此时this 指向的是window对象
    // 但是全局中没有getname2这个方法
    var getname2 = obj3.getName;
    alert(getname2());  //undifined


    // document.getElementById的使用错误
    var getId = function (id) {
        //alert(this);  // 这里的this指向的widnow
        return document.getElementById(id);
    }
    var id = getId("btn");
    console.log("id:" + id);  // ButtonElement


    // 这里把这个函数的this修改为指向document对象
    //var getId = document.getElementById;
    //id = getId("btn");
    //console.log("id:"+id);  // this的使用理解.html?_ijt=7mjupf008evikdgvnqbeddk23d:146 Uncaught TypeError: Illegal invocation


    // 手动修改this 的指向
    document.getElementById = (function (func) {
        return function () {
            // 这里强制让func对象指向documen对象
            return func.apply(document, arguments);
        }
    })(document.getElementById);

    var getId = document.getElementById;
    var button = getId("btn");
    console.log(button); // <button id="btn">打开</button>
    console.log(button.id);


    // 二、call和apply的使用
    var func = function (a, b, c) {

        "use strict";
        // 显示一下这个函数体内的this指向是个啥
        alert(this);
        console.log([a, b, c]);
    }
    // ƒ (a, b, c) {
    /*console.log([a, b, c]);
    }*/
    console.log(func);
    // func()表示直接去调用这个函数
    console.log(func());  // undifined


    // 通过apply方法可以去修改这个函数体内的 this 的指向，可以任意修改, window, document
    // 第一个参数也是代表函数体内的this指向，从第二个参数开始往后，每个参数被依次传入函数
    func.apply(null, [1, 2, 3]); // this指向window
    // 在严格模式"use strict"下上面的this指向为null, 不使用严格模式会指向window
    func.apply(null, [1]); // this指向window

    //如果我们传入的第一个参数为null，函数体内的this会指向默认的宿主对象。在浏览器中则是window
    func.apply(null, [0, 1]); // this指向window
    //console.log(func());
    func.apply(document, [0, 1, 2]);  // this指向document
    func.apply(this, [0, 1]);  // this指向window


    // 利用函数求出最大值
    console.log(Math.max.apply(null, [1, 2, 3]));
    console.log(Math.max(1, 2, 3));


    // 三、call和apply在实际开发中的用途
    // 1.）修改 this的指向
    var obj1 = {
        //alert(this);
        name: "seven"
    }
    var obj2 = {
        //alert(this);
        name: "haha"

    }

    window.name = "window";
    var getName = function () {
        console.log(this.name);
    }
    // 全局调用函数
    getName();  // this指向的是window
    getName.call(obj1); // this指向的是obj1对象
    getName.call(obj2); // this指向的是obj2对象

    // 添加一个事件
    document.addEventListener("click", function (ev) {
        // 这里的this 指向的是触发这个事件的那个对象
        console.log(this);  // document

        function Add(a, b) {
            console.log(this);
        }

        // 这个相当于是全局调用，thisz指向的是window对象
        Add(10, 1); // window
        // 修正这个this 的指向
        // 这里的this指向的还是触发这个事件的那个对象
        Add.call(this); // document
    });


    // 2).Function.prototype.bind
    // Function.prototype.bind,用来指定函数内部的this指向
    Function.prototypebind = function (context) {
        var self = this;

        return function () {
        console.log(context+"is"+ this);

            // 修改this（self）的指向为context对象
            return self.apply(context, arguments);
        }
    }


    var obj = {
        name: "xiuxiuDesign"
    }
    var getName = function () {
        // 修改this的指向为obj对象
        console.log(this.name);
    }.bind(obj);
    getName();


    // 3).借用其它对象的方法
    var A = function (name) {
        this.name = name;
    }
    var B = function () {
        // 修改A这个的this对象指向B
        A.apply(this, arguments);

        // Arguments ["xiuxiu is a good man", callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(arguments);
    }

    B.prototype.getName = function () {
        //
        return this.name;
    }
    var b = new B("xiuxiu is a good man");
    console.log(b.getName());


    // 想往argumments中添加一个新的元素，通常会借用Array.prototype.push
    (function () {
        Array.prototype.push.call(arguments, 3);
        console.log(arguments);
    })(1, 2, 1, 3)

    // 想把arguments转成真正的数组的时候，可以借用Array.prototype.slice方法，想截取arguments列表中的头一个元素时，可以使用Array.prototype.shift方法，这种机制的内部原理，我们可以翻开V8引擎源码，以Array.prototype.push方法为例
    var a = {};
    // 修改Array这个数组的指向， 让这个数组的push的this指向a的引用， 也就是a这个对象
    Array.prototype.push.call(a, 'first');
    Array.prototype.push.call(a, 'second');

    // 通过调用Array的push 方法, 同时修改了this 的指向为a这个对象的引用
    console.log(a.length);
    console.log(a[0]);



    // JavaScript的一种继承方式
    var AA = function (name, age) {
        this.name = name;
        this.age = age;
    }
    AA.prototype = {
        getName : function () {
            alert(this.name);
        }
    }

    var BB = function () {
    }
    // 让BB对象继承于AA对象
    BB.prototype = new AA("AAA", 19);



    var aa = new AA("xiuxiu", 18);
    console.log(aa.name +" "+aa.age); // xiuxiu, 18
    var bb = new BB();
    console.log(bb.name+" "+bb.age); // AAA 19

</script>


</body>
</html>

微信关注我们

原文链接：https://yq.aliyun.com/articles/647689

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Python数据挖掘与机器学习，快速掌握聚类算法和关联分析

摘要：前文数据挖掘与机器学习技术入门实战与大家分享了分类算法，在本文中将为大家介绍聚类算法和关联分析问题。分类算法与聚类到底有何区别？聚类方法应在怎样的场景下使用？如何使用关联分析算法解决个性化推荐问题？本文就为大家揭晓答案。数十款阿里云产品限时折扣中，赶紧点击这里，领劵开始云上实践吧！本次直播视频精彩回顾，戳这里！演讲嘉宾简介：韦玮，企业家，资深IT领域专家/讲师/作家，畅销书《精通Python网络爬虫》作者，阿里云社区技术专家。以下内容根据演讲嘉宾视频分享以及PPT整理而成。本文将围绕一下几个方面进行介绍： 1.聚类问题应用场景介绍 2.K-Means算法介绍与实现 3.使用K-Means算法对公司客户价值进行自动划分案例实战 4.关联分析问题应用场景介绍 5.Apriori算法介绍 6.FP-Growth算法介绍 7.使用关联分析算法解决

2018-03-21

694

并发不一定要依赖多线程（如PHP的多进程并发），但在Java中谈论并发，大多数都与线程脱不开关系线程的实现线程是CPU调度的基本单位。 Thread类与大部分的Java API有显著的差别，它的所有关键方法都是声明为Native的。意味着这个方法没有使用或无法使用平台无关的手段来实现。内核线程(Kernel-Lever Thread,KLT) 直接由操作系统内核(Kermel,下称内核)支持的线程由内核来完成线程切换，内核通过操纵调度器(Sheduler) 对线程进行调度，并负责将线程的任务映射到各个处理器上。每个内核线程可以视为内核的一个分身,这样OS就有能力同时处理多件事情，支持多线程的内核就叫做多线程内核(Multi-Threads Kernel )。程序一般不会直接去使用KLT，而使用KLT的一种高级接口即轻量级进程(Light Weight Process,LWP)，即我们通常意义上所讲的线程，由于每个LWP都由一个KLT支持，因此只有先支持KLT，才能有LWP。这1：1的关系称为一对一的线程模型。 KLT与LWP之间1：1的关系局限性由于是基于KLT实现的...

2018-03-21

676

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。