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

    关于js的this指向问题

    一直困扰着我们,并且面试的时候总是喜欢有关this的的问题

    讨论this的指向,就要从四个角度来分析看触发this的方式去决定this指向哪里

    1.方法调用

    var obj = {
        name: '残梦博客园',
        say: function(){
            console.log(this.name)    //残梦博客园
        }
    }
    obj.say();     //看这里面的this指向,需要看调用他的对象     !!!!所以要看这行!!!
    

    2.函数调用

    function getName(){
        console.log(this)    //window
    }
    getName()     //先写一个函数,然后调用这个函数,就是指向window  
    

    如果在严格模式下,会出现undefined

    function getName(){
        `use strict`
        console.log(this)    //undefined
    }
    getName()     //函数内部为严格模式要求,就出现了undefined
    

    3.new构造函数调用

    function Person(name){
        this.name = name
    }
    var person = new Person('残梦')
    var person1 = new Person('博客园')
    console.log(person,person1)  //Person {name: "残梦"} Person {name: "博客园"}
    // 通过new调用的时候,this就会指向他的实例  什么意思呢?
    // var person = new Person('残梦')运行的时候,会调用Person函数,并且把参传递过去,这个时候的this就会指向person
    

    4.call,apply等特殊方式

    有的时候我们希望可以自己去修改this的指向,那么就用到了这种方式

    function person(){
    	name = '残梦博客园'
    }
    function obj(){
    	console.log(this.name)
    }
    //我们想让obj的this指向person函数
    person.call(obj)    //这个单纯的改变指向,没有任何其他作用
    //和apply相比,只是参数不一样
    obj()      //残梦博客园
    //上面我调用了obj这个函数,发现他的this指向了person函数
    

    补充一点,es6的箭头函数,this会指向父元素的this指向

    总之一句话,this的指向就看调用他的方式,大体上就是四种方式,但是具体可能还会发生变化,比如es6箭头函数,严格模式等等

  • 相关阅读:
    leetcode——36.有效的数独
    leetcode——60.第K个排列
    leetcode——128. 最长连续序列
    leetcode——81. 搜索旋转排序数组 II
    leetcode——49.字母异构词分组
    leetcode——75.颜色分类
    leetcode——44.通配符匹配
    leetcode——88.合并两个有序数组
    leetcode——116.填充每一个节点的下一个右侧节点指针
    树莓派系统终端中让文件和文件夹显示不同颜色的设置
  • 原文地址:https://www.cnblogs.com/sunhang32/p/11854850.html
Copyright © 2011-2022 走看看