JS高级之this是谁？ 

 1 <!--
 2 英语单词：checkout：收银台 refresh:刷新
 3 const Index = () => import('/page/index.vue')//等于const Index = function a（）{return import('/page/index.vue')}
 4 
 5 js高级之this是谁？
 6 this本质上就是调用了就指向谁，this在指向谁有以下4种情况：
 7 --------------------------------------------------------------------------------------
 8 *this之普通函数：
 9  function t(){
10     this.age=23;
11   }
12   t();//如果没有这方法就会报undefined，在window就找不到age
13   //这个调用者是null，this为null时，js把this指向window
14   //在es5及以后，当this为null时抛出异常
15   alert(window.age);
16   //函数内带有this操作，不能直接调用，应该new，否则会污染全局
17 -------------------------------------------------------------------------------------
18 *this之对象方法
19  window.name='kjx'
20   function intro() {
21     alert('my name is '+this.name);
22   }
23   var dog={
24     name:'孙小二',
25   }
26   dog.intro=intro;
27   dog.intro();//输出是my name is 孙小二
28   var cat={
29     name:'加肥猫'
30   }
31   cat.intro=intro;
32   cat.intro();//输出是my name is 加肥猫
33   (cat,intro=dog.intro)();//输出是全局变量my name is kjx，如果没有定义全局变量的话就会没有输出，赋值运算的结果是一个值，如果你拿一个值来调用这个值不属于任何一个对象
34 --------------------------------------------------------------------------------------
35 *this之构造函数：
36 var a = new fn();
37   console.log(a);
38   function cat (name,color) {
39     this.name=name;
40     this.color=color;
41   }
42 
43   /*
44   0.方法new的瞬间，得到一个空对象{}
45   1.方法的this指向该空对象
46   2.运行方法
47     {}.name=name
48     {}.color=color
49     返回该对象
50   */
51   var cat=new cat();//会得到一个新的对象，方法内的this指向该新对象
52   console.log(cat);
53 --------------------------------------------------------------------------------------
 1 <style>
 2   div{
 3     height: 300px;
 4     width: 300px;
 5     margin: 10px;
 6     border: 1px solid blue;
 7   }
 8 </style>
 9 <body>
10 <!--
11 *this之通过call，apply调用，call和apply会动态更改this的指向
12 -->
13 <div id="test1">test1</div>
14 <div id="test2">test2</div>
15 </body>
16 <script>
17   var test1=document.getElementById('test1')
18   var test2=document.getElementById('test2')
19   function t () {
20     this.style.background='gray';
21   }
22   t.call(test2);
23   /*
24   函数名.call(对象，参数1，参数2，参数3,...)
25   1.把函数的this，指向对象
26   2.运行函数，传参为参数1，参数2，参数3....)
27   函数名.apply(对象，[参数1，参数2，参数3,...])
28   1.把函数的this，指向对象
29   2.运行函数，传参为参数1，参数2，参数3....)
30   */
31 
32 </script>

 1 //课后习题：
 2   var name="The Window";
 3   var object={
 4     name:'My Object',
 5     getNameFunc:function () {
 6       return function () {
 7         return this.name;
 8       }
 9     }
10   }
11   alert(object.getNameFunc()());//输出的是The Window，为什么呢？ function () { return this.name; }相当于object.getNameFunc()，return返回的是函数函数是一个值，this.name就是全局变量的name

 

posted on 2019-03-10 23:43  俊小白jxb  阅读(190)  评论(0)    收藏  举报

导航