eslint外部this和function中的this
来源:互联网 发布:大数据概念股龙头股票 编辑:程序博客网 时间:2024/05/16 09:51
做一个功能,jquery实现很简单
$(".variant_list").find("li").each(function(){
$(this).click(function() {
$(this).siblings('li').removeClass('active')
$(this).addClass('active')
$('#product_property').val($(this).attr('data-id'))
parentDom.priceChange($(this).attr('data-id'))
});
});
但在es6中就比较麻烦
export default class CartProperty { static defaults = { actionMethod: 'POST', productPriceId: '#product_price', productNumUrl: '/api/carts/updateprice', productCurrentId: '#product_id', productNumId: '#product_num', productPropertyId: '#product_property' } constructor(element) { this.$element = $(element) this.options = $.extend({}, CartProperty.defaults, this.$element.data()) // 当前显示的价格 this.$productPriceId = $(this.options.productPriceId) // 当前的product id this.$productId = $(this.options.productCurrentId).val() // 当前num this.$productNumVal = $(this.options.productNumId).val() // 当前规格的隐藏域 this.$productPropertyId = $(this.options.productPropertyId) } init() { this.propertyChange() } propertyChange = () => { this.$element.find('li').each(function () { $(this).on('click', () => { $(this).siblings('li').removeClass('active') $(this).addClass('active') $('#product_property').val($(this).attr('data-id')) }) }) } priceChange = (currentProperty) => { // ajax获取价格 const ajaxOptions = { method: this.options.actionMethod, data: { number: this.$productNumVal, property: currentProperty, id: this.$productId } } console.log(currentProperty) if (this.options.actionWithToken) { ajaxOptions.headers = { Authorization: getToken(), } } $.ajax(this.options.productNumUrl, ajaxOptions).done((data) => { this.$productPriceId.html(`¥${data.price}`) }).fail(() => { window.location.href = '/login' }) }}
上面代码中的this指向了class CartProperty, 但propertyChange中each的this指向啦each的li,现在我想在click中调用priceChange,肯定使用this是调用不了的,刚开始想到啦self,但self指向了window,后来我就想需要个东西把this指引进来:
propertyChange = (parentDom) => { this.$element.find('li').each(function () { $(this).on('click', () => { $(this).siblings('li').removeClass('active') $(this).addClass('active') $('#product_property').val($(this).attr('data-id')) parentDom.priceChange($(this).attr('data-id')) }) }) }
这里我用parentDom把this指引进来,同样的,调用这个function的地方需要传入this
init() { this.propertyChange(this) }
阅读全文
0 0
- eslint外部this和function中的this
- js中的function和this
- 认识js中的function和this
- 认识js中的function和this
- 认识js中的function和this(经典)
- 认识js中的function和this
- 认识js中的function和this
- js中的function/this细解
- JQuery中的this和$(this)
- jquery中的this和$(this)
- jquery中的this和$(this)
- c++ 中的this 和*this
- js中的function函数对象和this指针详解
- 认识Function对象和this
- "无法解析的外部符号" 和 "This function or variable may be unsafe"
- 认识js中的function和this---new Function(a,b,body)方式
- 认识js中的function和this---new Function(a,b,body)方式
- js中的function和this---new Function(a,b,body)方式
- 网络传输的加密与解密
- 利用Kryo序列化库是你提升Spark性能要做的第一件事
- 完备的最大熵模型算法原理解析
- Ubuntu虚拟机无法连接网络
- 生日蛋糕 POJ
- eslint外部this和function中的this
- VS编写日志文件
- QT 5.1.1 串口类使用过程中出现报文插入现象的原因及解决方案
- 在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理。 例如: //实例化一个NSDateFormatter对象 NSDateFor
- [wqs二分 DP] Codeforcces 739E. Gosha is hunting
- JavaScript 事件
- 手把手教你用Qt制作和使用自己制作的静态库
- Visual studio 2017+Kinect2.0+opencv3.2.0 配置
- spring