zoukankan      html  css  js  c++  java
  • This关键字

    在JavaScript中的this不是固定不变的,随着他的环境而改变

    为什么使用this:

    看下面这个代码:

    var lilei={
    
    sname:"Li  Lei",
    
    sage:11,
    
    intr:function(){
    
    document.write(`<h1> I am ${sname},I am ${sage}</h1>`)
    
    }
    
    }
    lilei.intr();
    //会报错  sname is not defined

    为什么对象自己的方法想使用自己对象的属性,会出现报错信息?

    从存储结构、函数运行的原理进行解释;

    当打开浏览器的时候,内存会创建一个window变量全局作用对象,在这个代码中,只存在一个lilei这个全局作用对象,包含很多的成员变量,而每个函数都有一个scopes属性,它紧密的跟函数的外层作用域相结合,一个函数能用哪些变量,取决于这个链上都有哪些变量,

    js当中只用两级作用域,一级是全局,一级是函数,lilei对象不是函数,如果存数据,也进不了scopes,所以intr函数的scopes指向外面更大的作用域

    任何函数调用时,先创建临时的函数作用域,然后将自己临时的作用域与window全局作用域形成作用域链,intr自己没有局部变量(一种是var出来的,另一种是形参),sname、sage不满足上述两种要求,所以这个函数作用域是空的,对象不是作用域,所以对象的成员属性无法进入作用域链被函数访问,

    结论:对象自己的方法不能轻易访问自己的成员,对象不是作用域,成员不会自己进入作用域,

    解决:给sname、sage前加lilei.

    缺点:lilei仅仅是一个变量名,变量名可以发生变化的,而调用的lilei也被迫跟着变化,这就是紧耦合,而我们需要松耦合,就是外面怎么变化,里面不发生变化,实现方法,将lilei.替换为关键字this.,

    this指的是正在调用函数的.前的对象

    所以被调用的lilei可以改为this,在运行时this会被换为lilei,在调用的时候,.前是lilei,this指谁,跟存在的地方无关,看的是.前是谁。

    这样写,以后对象名lilei改为ll时,里面的this不用改,依然是指向.前的调用的ll。

    什么是: 在函数调用时,自动指向.前的对象的关键词

    为什么: 避免在对象的方法中写死对象名,形成紧耦合。

    何时: 只要对象自己的方法,想访问自己的成员时,都要加this.

           1. this和定义在哪儿无关,只和调用时.前的对象有关

           2. 全局函数调用,没有., this默认指window

    this的作用:

    1、在方法中调用:则this表示该方法所属的对象或全局对象
    在外包裹一个指定的对象时,方法中的this指向包裹他的对象,如果有很多层对象包裹,则this指向最深层调用他的第一个对象,

    var name = 'windowdada';
    var obj = {
    name: 'objdada',
    objB: {
    name: 'objBdada',
    bFun: function(){
    console.log(this.name);
              }
        }
          };
    var test = obj.objB.bFun();
    //输出结果为objBdada ,()左边是bFun引用,它指向objB这个对象,所以打印出objBdada
    var test2 = obj.objB.bFun;
    test2();
    //输出结果为windowdada, ()的左边为test2,它不是某个对象的引用,所以是全局对象
    var test3 = obj.objB;
    var test4 = test3.bFun;
    test4();
    //同上
    var name = 'windowDada';
    var obj = {
    name: 'dada',
    foo: function () {
    console.log(this.name);
              }
          };
    
    var foo = obj.foo;
    // 写法一  
    obj.foo()// dada
    // 写法二 
    foo()  //windowDada

    2、单独使用this,this指向全局对象

    var x = this;
    //this指向[object Window]

    3、函数中使用this(非严格模式)
    根据函数所属默认绑到this上,那么在浏览器中,window就是该全局对象[object window]
    则this指的是全局对象[object Window]
       函数中使用this(严格模式)
    严格模式下this 函数没有绑定到this上,此时的this是undefined
    在事件中的this,this指向接收事件的HTML元素,对该元素进行操作
    对象中绑定的this,this是属于一个对象,而对象是函数的所有者

    call的用法:
    call方法用来代替另一个对象调用一个方法,该方法可以将一个函数对象的上下文改变为由this obj指定的新对象。
    call方法的参数,

    1.如果是不传,或是null,undefined的情况下,函数中的this指向就是指window对象,

    2.如果传递的是另一个函数的函数名,函数中的this指向就是这个函数的引用,

    3.如果参数传递的是基本类型数据时,函数中的this指向就是其对应的 包装对象了,

    4.如果参数传递的是一个对象时,函数中的this就指向这个对象。

    var da = {
    name: "da",
    sayHello: function (age) {
    console.log("hello, i am ", this.name + " " + age + " years old");
        }
                };
    
    var jeskson = {
    name: "jeskson",
    };
    
    da.sayHello(12); //hello, i am da 12 years old
    
    da.sayHello.call(jeskson,13); //  hello, i am jeskson 13 years old

    显示函数绑定:
    call(thisObj,arg1,arg2,arg...)

    var person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
                 }
            }
    var person2 = {
    firstName:"John",
    lastName: "Doe",
             }
    var x = person1.fullName.call(person2); 
    document.getElementById("demo").innerHTML = x; 

    apply的用法:

    apply(thisObj,argArray)
    var person={
    fullName:function(){
    return this.firstName+""+this.lastName;
    }}
    var person1={
    firstName:"Bill",
    lastName:"Gates",
    }
    person.fullName.apply(person1);
    //返回"Bill Gates"
    }



  • 相关阅读:
    坑爹的VS2012
    View Properties [AX 2012]
    Understanding the RelationshipType Enumeration [AX 2012]
    《操作系统概念》学习笔记-第二章
    《操作系统概念》学习笔记-第一章
    操作系统云课堂笔记
    C#学习笔记
    github生成SSH公钥
    【笔记】第一次将网站部署到服务器上
    windows下postgresql安装失败解决方法:无法运行getlocales.exe
  • 原文地址:https://www.cnblogs.com/haohuihai/p/13199872.html
Copyright © 2011-2022 走看看