实例中this的困惑

最新推荐文章于 2025-04-22 19:11:57 发布

goodgirl1991

最新推荐文章于 2025-04-22 19:11:57 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏： avalon

本文链接：https://blog.youkuaiyun.com/goodgirl1991/article/details/50614660

avalon 专栏收录该内容

11 篇文章

订阅专栏

这几日日实现avalon教程以及js插件中的实例时，对this产生了一些疑惑，经过实验好不容易清晰了些，在此记录，以备日后忘记时查询。

代码一：

var model=avalon.define({
    $id:"test",
    firstName:"司徒",
    lastName:"正美",
  arr:["aaa","bbb","ccc","ddd"],
        name: {
            
            get: function () {
                return this.firstName+this.lastName//此处表示包含firstName，lastName等属性的这一个大对象，至于为何，我也不知，其实我本以为该this是指向name这一属性的
                           }
        },
        
    singleCheck: ["aaa","bbb"],
    allCheck:false,
    length:{

        get:function(){
            return this.singleCheck.length
        }
    },
    allCheckClick: function () {
        if (model.allCheck == true)
           {model.singleCheck = model.arr;
           console.log(this)//此处this表示全选的那个checkbox控件，因为是该控件的click事件被触发，进而该控件调用的allCheckClick方法，故this指向该控件} 
        else
            model.singleCheck = [];
    }
    
    });
       
        model.singleCheck.$watch("length", function () {
            if (model.singleCheck.length==4)
                model.allCheck = true
            else
                model.allCheck=false

    

        })
        model.$watch("firstName",function(){
            model.name=model.firstName+model.lastName;

        });
        model.$watch("lastName", function () {
            model.name = model.firstName + model.lastName;

        });

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="avalon.js"></script>
    <script src="jquery-1.10.2.js"></script>
    <script src="js.js"></script>
</head>
<body ms-controller="test">
    <div>First name:<input type="text" ms-duplex-string="firstName"></div>
    <div>Last name:<input type="text" ms-duplex-string="lastName"></div>
    <div>Hello,<input type="text" ms-duplex="name"></div>
    <div>{{firstName}}|{{lastName}}</div>
    <ul>
        <li><input type="checkbox" ms-duplex-checked="allCheck" ms-click="allCheckClick"/>全选</li>
        <li ms-repeat="arr"><input type="checkbox" ms-value="el" ms-duplex="singleCheck">{{el}}</li>
    </ul>
</body>  
</html>

代码二：

  function ellipsis() {
        var o = this.data("pagination");
        var self = this;
        $ellipsis = $(".ellipse").click(function () {
            var val =$(this) .parent().prev().text();
            $(this).html("<input type='number' min='1' max='" + o.pages + "' >")
            $("input").val(parseInt(val.valueOf()) + 1);
            $("input").focus().keyup(function (e) {
                if (e.which == 13)
                    selectPage.call(self, $(this).val() - 1);
                else if (e.which == 27)
                    $ellipsis.html("...");

            }).blur(function () {
                if ($(this).val() != "")
                    selectPage.call(self, $(this).val() - 1  ) ;             else
                    $ellipsis.html("...");
//此处this指的是发生事件触发的那个控件的DOM，注意，是DOM，而非jquery对象。大概是由于一旦触发blur事件，就由相应DOM调用所定义的blur方法吧~，这一方法中的具体过程，是由我们自己定义的。

});});
    }