javascript - this在jquery里有哪几种常用写法？

Question

$(this)[hasSelected?"removeClass":"addClass"]('selected')
等价于：
$(this).removeClass('selected');
或者
$(this).addClass('selected');


为什么$(this)后面可以加[]数组？，$(this)的常用写法一般用几种？这块不是很理解！

Answer 1

你要把$(this)看成一个整体，执行后的结果，是一个经过jquery转换的html对象，后面加的[]，不是数组，而是取出这个对象的属性；
比如：

var obj={a:1,b:2};
console.info(obj["a"]);//>>>>结果为1

明白了么

Answer 2

$(this)就jq对象，你写成$(this)[0]就转成原生对象了，就可以使用原生的方法了。还可以这样写$(this).get(0),$(this).item(0)这些都是转成原生的。$(this).eq(0)仍然是jq的对象。

Answer 3

好吧~ 现在才知道还要这种写法
一般用的就是 后面两种 单独的 class 操作~~
hasSelected?"removeClass":"addClass" 这是一个3目运算，根据hasSelected的值，执行remove或者add操作

不用纠结这些比较偏门的写法的 遇到没见过的写法，查下 或者 console 输出下就知道了

Answer 4

首先$(this)是一个jQuery对象，对象会有各种属性和方法。
removeClass和addClass就是$的方法。

[] 和 . 都可以访问对象的方法和属性。

[]中可以是js表达式。

hasSelected?"removeClass":"addClass"

就是一个表达式，用来决定是访问removeClass方法还是addClass方法。
本质上和.没有什么区别，只是.不能使用表达式。

Answer 5

// this 在 javascript 中，this的值取决与你如何调用这个函数，而不是函数定义所在的位置。函数的调用分为6种情况，也就是this的来源有6种：
    console.log('********************this的使用********************');
    (function () {

        // 普通函数调用，this为全局对象或严格模式下是undefined
        (function () {
            function doSomething() {
                console.log(this);
            }
            function doSomethingOther() {
                'use strict';
                console.log(this);
            }
            doSomething();// windows
            doSomethingOther();// undefined
        })();

        // 作为对象的方法，this为那个对象
        (function () {
            var obj = {
                name : 'javascript',
                dosomething : function () {
                    console.log(this);
                }
            }
            obj.dosomething();//object
            var fun = obj.dosomething;
            fun();// window
        })();

        // new 表达式，this为以该函数为原型的新创建的对象
        (function () {
            function obj() {
                this.name = 'javascript';
                this.dosomething = function () {
                    console.log(this);
                }
            }
            var oObj = new obj();
             oObj.dosomething();// obj
        })();

        // 使用 apply/call指定 this
        (function () {
            function obj() {
                this.name = 'javascript';
                this.dosomething = function (name,age,tall) {
                    console.log(this);
                    console.log([name,age,tall]);
                }
            }
            function objTwo(name) {
                this.name = name;
            }
            var oObj     = new obj();
            var oObjTwo = new objTwo('php');
             oObj.dosomething.call(oObjTwo,'php','25','157');// objTwo 
             oObj.dosomething.apply(oObjTwo,['sql','23','163']);// objTwo 
        })();

        // 用bind绑定固定的this        
        (function () {
            function obj() {
                this.name = 'javascript';
                this.dosomething = function () {
                    console.log(this);
                }.bind(this);// 绑定this
            }
            function objTwo(name) {
                this.name = name;
            }
            var oObj     = new obj();
            var oObjTwo = new objTwo('php');
             oObj.dosomething.call(oObjTwo);// obj
        })();

        // 事件处理函数中的this是当前的触发事件的DOM元素(event.currentTarget)
    })();