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"
    }



  • 相关阅读:
    HDU1029 Ignatius and the Princess IV
    UVA11039 Building designing【排序】
    UVA11039 Building designing【排序】
    POJ3278 HDU2717 Catch That Cow
    POJ3278 HDU2717 Catch That Cow
    POJ1338 Ugly Numbers(解法二)
    POJ1338 Ugly Numbers(解法二)
    UVA532 Dungeon Master
    UVA532 Dungeon Master
    POJ1915 Knight Moves
  • 原文地址:https://www.cnblogs.com/haohuihai/p/13199872.html
Copyright © 2011-2022 走看看