zoukankan      html  css  js  c++  java
  • this的指向

    this的指向

    对于一些刚刚学习js的小萌新来说,看到this绝对会是比较头疼的事情,因为不知道他到底指向谁,从而看不懂别人写的代码,希望我的这篇博客会对大家有所帮助,同时也整理一下自己理解的思路,如果有任何不对的地方,欢迎反馈.

    this有四大环境(调用模式)下的指向,在我们判断this的到底代替谁之前,必须确定当前this的环境,this就像一个变色龙,根据环境不同指向也不同

    1. 函数调用
    function fn(){
                console.log(this); //打印看一下this,发现this指向window
            }
            fn();  //可以理解为window.fn();

           2.构造函数调用模式

    function Person(name,age){

    this.name = name,

    this.age = age,

    this.say = function(){

    console.log(this);

    }

    }

    var p = new Person("二狗",20);

    p.say(); //打印出来的是p这个实例对象

    var q = new Person("狗蛋",21);

    q.say(); //打印出来的事q这个实例对象

     3.对象调用模式

    其实构造函数里的this.name等一些的this也是指向实例对象

     var obj = {
                name : "zs",
                age : 18,
                say : function(){
                    console.log(this);  //指向obj
                }
            }
            obj.say(); //因为是obj这个对象去掉用的say方法
    
    var arr = [obj,function(){console.log(this)},2];
            arr[0].say();  //这里指向就是obj
            arr[1](); //指向的是arr
            //再看看这个
            obj['say']();//这里是用了对象的[]语法,实际上与.语法一样的所以是对象调用模式,指向的是obj,而不是window
    

      

          4.上下文调用模式

    这个模式虽说叫上下文,但我个人感觉叫借用这个名字更容易理解

    作用:改变this的指向

    使用场景:借用其他类型的方法,自己又没有这个方法

    方法:call  apply  bind,根据不同的情况指向也不同,具体用法请查看百度

  • 相关阅读:
    base64 web前端js解码与转码
    react常见组件问题Can't perform a React state update on an unmounted component
    Git详细的多人开发心得
    数组中filter方法配合字符串方法trim使用
    Ant Design实现表格搜索、分页、多选处理
    Ant Design中日期选择器的disabledDate用法
    react学习资源汇总
    react开发项目到上线全过程详解
    MySQL-5.6.30-linux-glibc2.5-x86_64.tar.gz 安装教程
    linux下配置mysql主从复制配置
  • 原文地址:https://www.cnblogs.com/wchjdnh/p/10170762.html
Copyright © 2011-2022 走看看