this的相关知识

Posted 2020-08-27 起个好名字

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了this的相关知识相关的知识，希望对你有一定的参考价值。

一如既往，直接上代码：

 1         function fn(name,age){
 2             var obj=new Object();
 3             obj.name=name;
 4             obj.age=age;
 5             obj.talk=function(){
 6                 alert(this.name+" "+this.age)
 7             }
 8             return obj;
 9         }
10         
11         var a1=fn("aaa",13)
12         a1.talk()

在我们不使用this的时候，我们的代码需要这么写：新建立一个对象，给这个对象赋予参数和方法，最后返回这个对象

也不能说不方便，事实上这种写法非常常见。

而下面是写了this的情况：

 1         function fn2(name,age){
 2             
 3                 this.name=name,
 4                 this.age=age,
 5                 this.talk=new Function("alert(this.name+‘ ‘+this.age)")//这里注意，中间的必须是单引号否则就会失败
 6                 
 7                 this.setName=function(thename){
 8                     this.name=thename;
 9                     var that2=this;        //如果不加上这句话，下面的方法便是window调用的，如果给window一个name，就会返回这个name
10                     //因为去掉后——，实际上就是：alert((a2.getName())()),即alert(fn())，所以this.name指的就是调用这个方法window的名字了
11                     return function(){
12                         return that2.name
13                     }
14                 }
15                 this.getName=function(){
16                 var that=this;
17                 return function(){        //这里是个闭包，通常外部变量无法访问内部的数值，但是通过闭包却可以得到这个实例的各个参数
18                     return that.name    //但是实际上我们发现貌似不需要闭包也能得出结果。。。。。所以说这个闭包是干什么用的？
19         }
20                 }
21         }
22         this指代的对象使用变量that保存起来，这样即使环境发生了改变，that指代的对象也不会改变
23         this指代的对象会根据环境的不同而改变
24         var a2=new fn2("lisi",44)
25         
26         a2.talk();
27         a2.setName("wangwu")()
28         alert(a2.getName()())

将a2打印出来会发现，这就是个对象，不需要再创建新的对象了。

但是代价非常明显，需要搞清楚this在程序中到底处于什么什么地位，有什么作用。

this.name=name

这句话的意思是，创建一个名为name的属性（第一个name），之所以需要加上this是因为参数名也是name。整句话的意思就是将形式参数name的值，赋予给这个对象的name属性中去。

为什么这么写，因为程序员懒得想另外的名字，例如name1，name2。一方面类似的参数多起来会很麻烦，本来起名字就很烦了，而且浪费，几乎属于一次性的，用一次就没用了。

注意第16行有一个：

that=this

首先声明这个that并不是个this相同是个特殊的什么关键字，它就是个普通的变量，你可以将它换成任何名字。而之所以出现这句话原因程序中也介绍了，如果不懂，我们翻译一下吧。

this就是这个的意思，那么：

this.getName=function(){
var that=this;
return function(){
return that.name
}

这个（对象）.名为getName的方法{

　　返回一个函数{

　　返回这个.name属性

　　}

由上下文我们可以知道，它的意思是返回这个对象的name属性，但是如果我们调用了就会发现：

var aa=a2.getName()()

等价于

var aa=this.name

这样一看this指代的应该是aa才是啊，所以我们需要将整个this，即这个对象用另一个变量保存起来，就变成了——

var aa=that.name

这样一看是不是正常不少？

this也可以这么用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script ></script>
        <script>
            function Human(username,age){
                this.username=username;
                this.age=age;
                this.introduce=function(){
                    alert(this.username+this.age)
                }
            }
            
            function Student(username,age,score){
                this.score=score;
                Human.call(this,username,age);//翻译过来就是，将这个对象（毕竟没有规定同一个方法中不存在多个对象，你也可以在这里面继续创建来着。所以——
                //这里的this指代传入human的对象是这个Student对象的实例，然后外带一些参数。
                
            }
            var stu=new Student("aaa",45,66)
            stu.introduce();
            alert(stu.score)
        </script>
    </body>
</html>

Human.call的意思是，将Student对象传入，后面的是参数。所以最终的意思就是传入其对象实例，实例的参数就是后面两个。

请注意，call方法是继承的意思，这个后面介绍

以上是关于this的相关知识的主要内容，如果未能解决你的问题，请参考以下文章

ngx-translate实现国际化：this.translate.use()this.translate.get()this.translate.instant()onLangChange(代码片段