源码

  • ts ``` //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);//现在这里就输出了正确的随机出来的名字了

  2. - HTML

<!DOCTYPE html>

```

  • 浏览器输出结果

image.png