javascript 中的this call apply

最新推荐文章于 2024-03-31 15:50:35 发布

zhangchangz

最新推荐文章于 2024-03-31 15:50:35 发布

阅读量174

点赞数

分类专栏： javascript

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直接上代码，有注释，其中有参考其他人的内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js中this的学习</title>
    <script type="text/javascript">
        //测试在对象的方法中使用this
        var test = {
            name: "xuexi",
            getName:function(){
                console.log(this === test);// 这其中的this被对象test的方法getName调用，this指的是test对象
                console.log(this.name);
            }
        };
        test.getName();//true，xuexi

        // 测试在普通方法中使用this
        window.name = "testthis";
        var testFun = function(){
            console.log(this.name); // 这里的this被方法testFun调用，指的的全局对象
        };
        testFun();// testthis

        //测试在对象的构造方法使用this
        var testClass = function(){
            this.name = "a";// 这里的this被testClass对象调用，指的是testClass对象本身
        };

        var classobj = new testClass();
        console.log(classobj.name);// a
        console.log(classobj); // Object { name: "a" }

        // 测试在加入return时的this是否还有作用
        var testClass2 = function(){
            this.name = "this_name";
            return{
                name:"return_name"
            }
        };
        var classObj2 = new testClass2();
        console.log(classObj2.name); //return_name
        console.log(classObj2); //Object { name: "return_name" }
        // 从结果可以看出当有return是this 就失去了作用
    </script>
</head>
<body>
js中this的学习
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js中的call方法学习</title>
</head>
<body>
js中的call方法学习
<input type="text" id="myTest" value="input text"/>
</body>
</html>
<script type="text/javascript">
    // call 方法用于改变对象的内部指针，即改变this指向的对象
        var obj = function(){
            this.value = "对象！"; // 这里的this指的是obj对象本身
        }
        var objTest =new obj();
        console.log(objTest.value); // 对象！

        var window.value = "global 变量";
        var Fun1 = function(){
            alert(this.value);
        }
        Fun1();// global 变量 方法Fun1中this指向的是全局对象即 window

        Fun1.call(window); //global 变量 这里用window替换原来的window 故结果不变
        Fun1.call(document.getElementById("myTest")); //input text 这里使用id为"mtTest"的input元素替代原来的window对象，故结果为 input元素的值 "input text"
        Fun1.call(objTest);//  对象！ 这里使用obj对象替代window对象 故结果为obj 对象的value的值
    </script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var func = new function(){ //匿名行数对象
            this.a = "functest";
        }
        var myfunc = function(x){
            var a = "myfunc";
            alert(this.a);
            alert(x);
        }

        myfunc.call(func,"vartest");
        // 第一个参数是传递给当前对象用来替换this的对象，第二个或以后的参数是传递给当前对象的参数
        //apply 方法和call方法的第一个参数都是传递给当前对象的对象，不同的是call方法传递给当前对象的参数是一个一个的
        //而 apply方法传递给当前对象的参数是一个数组
    </script>
</head>
<body>

</body>
</html>