TypeScript 函数- lambads 和 this 关键字的使用

源码

//JavaScript 写法
//声明一个对象
// let people = {
//  //给对象增加一个 name 属性 值为一个数组
//  name:['xiaochuan','xiaoming','xiaohong'],
//  //给对象增加一个 获取名字的方法
//  getName:function(){
//      //这里需要得到的名字的随机的
//      return function(){
//          //声明一个 i 接收一个 0 ~ 4 随机的
//          //Math.floor    floor() 方法可对一个数进行下舍入。   http://www.w3school.com.cn/jsref/jsref_floor.asp
//          //Math.random       random() 方法可返回介于 0 ~ 1 之间的一个随机数。    http://www.w3school.com.cn/jsref/jsref_random.asp
//          var i = Math.floor(Math.random()*4);
//          //将结果作为一个对象返回
//          return {
//              // n:this//测试输出为 [object Window]
//              n:this.name[i]//测试输出为 undefined  因为此时的 this 指向的是 window 
//          }
//      }
//  }
// };
// //声明一个接受返回函数的变量
// let MyName = people.getName();
// //输出结果
// alert("名字：" + MyName().n);//这里输出的是 undefined 因为此时的 this 指向的是 window 

//使用 lambads 和 this 关键字修复上面出现的问题
//实际上这个  lambads 就是 ES6 中的 =>
let people = {
    //给对象增加一个 name 属性 值为一个数组
    name:['xiaochuan','xiaoming','xiaohong','xiaoheng'],
    //给对象增加一个 获取名字的方法
    getName:function(){
        //这里需要得到的名字的随机的
        //箭头函数的实现原理：除了简洁之外，箭头函数还有另外一个优点，就是函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁，所以这里指向的是 people 这个对象
        return ()=>{
            //声明一个 i 接收一个 0 ~ 4 随机的
            //Math.floor    floor() 方法可对一个数进行下舍入。   http://www.w3school.com.cn/jsref/jsref_floor.asp
            //Math.random       random() 方法可返回介于 0 ~ 1 之间的一个随机数。    http://www.w3school.com.cn/jsref/jsref_random.asp
            var i = Math.floor(Math.random()*3);
            console.log(i);
            //将结果作为一个对象返回
            return {
                // n:this//测试输出为 [object object]  其实指向的是 people
                n:this.name[i]//测试输出为正确的随机出来的名字了
            }
        }
    }
};
//声明一个接受返回函数的变量
let MyName = people.getName();
//在控制台打印结果
console.log("名字：" + MyName().n);//现在这里就输出了正确的随机出来的名字了

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript 函数- lambads(实际上这个  lambads 就是 ES6 中的 =>) 和 this 关键字的使用</title>
</head>
<body>
    <script type="text/javascript" src="Functions.js"></script>
</body>
</html>

浏览器输出结果

image.png