关于本节课sort方法以及this.proxy.default的两个问题

来源:10-3 使用Proxy代理用户信息

夜魇丶

2020-06-11

老师你好。有两个问题,没有想明白。

第一个问题是关于sort()方法的使用。

http://img.mukewang.com/szimg/5ee1098709e1925909110537.jpg

sort方法,如果参数a>b则返回一个大于0的数,a<b则返回小于0的数。这一点我明白。

但这里为什么写三元表达式我还是没明白。

我建了一个demo,把后面的三元判断删掉,只留下a.name > b.name,结果可以正常排序。

http://img.mukewang.com/szimg/5ee10a810917813b10230367.jpg

但是我把vue里面的这里删掉。

http://img.mukewang.com/szimg/5ee10afb0921205808330063.jpg

页面上的按钮就失去作用了。

http://img.mukewang.com/szimg/5ee10b40094b5e4202860413.jpg

不知道为什么,跟vue的生命周期有关么…vue不太会。


第二个问题:this.proxy.default

这个问题一直都不太懂…又觉得很基础不好意思问。。但是太困扰了。。

首先我打印了一下new出来的this.proxy

http://img1.sycdn.imooc.com/szimg/5ee10cec09b3f41d03010096.jpg

http://img1.sycdn.imooc.com/szimg/5ee10cf409fa09a202250171.jpg

里面是这样的。

这个里面,没有属性名叫asc、desc、default…

按照我一贯的理解。如果用到某个对象的属性。比如说a.name。那么一定是事先定义好的。

就类似于:

http://img.mukewang.com/szimg/5ee10d9909baf31303620146.jpg

所以我很奇怪,当执行

this.userList = this.proxy.default

this.userList应该等于undefined。其它asc,desc也是同理。

http://img.mukewang.com/szimg/5ee10e0a09aed06209010571.jpg

这里我也是实在想不明白,key的asc属性是需要手动加上去的吧。但是在下文中的事件里:

http://img1.sycdn.imooc.com/szimg/5ee10e3d09527ee404270144.jpg

这里直接使用this.proxy.asc赋值了。……

所以是因为js是动态语言么……


辛苦老师解答。

写回答

1回答

谢成

2020-06-11

1、 a.name-b.name得到的是一个boolean类型的值,也就是ture/false,但sort的参数需要得到一个大于或小于0的值

2、asc、desc、default  在视频中强调了是我们自定义的,并不是proxy的属性,其实起什么名字都可以,类似于参数,在这个例子中:

//img.mukewang.com/szimg/5ee1706d09393a0d06640429.jpg

上面相当于定义了这个参数,然后在下面判断每次点击按钮的时候传递进来的参数的值是什么:

//img.mukewang.com/szimg/5ee170ad09dc2d4e11680549.jpg

根据这个传递进来的值来进行相应的操作。


proxy相当于是个拦截器,如果代理了这个对象,那么对于这个对象的访问都需要经过这个拦截器,当我们操作这个对象的时候,都是要经过这个拦截进行操作的,proxy并没有自己的属性,只是提供了一些钩子函数用于拦截对象的操作来使用。



0
1
夜魇丶
帮了大忙…。第一个问题。我看文档说a大于b时候则返回一个大于0的数。以为是return a > b 这样的形式。其实应该是return a-b,这样返回值就是大于0的数。难怪要用三元运算符。第二个问题也解决了。我实在没想明白,就回去再看了一遍视频,回来看这个回答明白了。不能把这里的key当属性来想,外面有个get方法。 很感谢。
2020-06-11
共1条回复

JavaScript ES(6-11)全版本语法 前端都需要的基础课

前端无门槛学习,从ES6到ES11,一套课程掌握JS最新语法

1328 学习 · 296 问题

查看课程