• 9-this


    第九课 this

    一、this基本概念

    this是Javascript语言的一个关键字。在JavaScript中,this是动态绑定,或称为运行期绑定的。在不同的情况下,this指向各不相同。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

    1.全局范围内

    当在全部范围内使用 this,它将会指向全局对象,在浏览器中,window 就是该全局对象。

    2.函数调用

    this指向全局对象,即windows

    var name = 'Jeepeng';
    function showName() {
        console.log(this.name); 
     }
    showName();
    

    3.对象方法调用

    在对象方法调用中this指向对象

    var person = {
        name: 'Jeepeng',
        showName: function() {
            console.log(this.name);
        }
    };
    person.showName();
    
    

    4.构造函数调用

    在构造函数内部,this指向新创建的对象。

    function Person(name) {
        this.name = name;   
    }
    var person = new Person('Jeepeng');
    console.log(person.name);
    var person1 = Person(‘Lily’);  
    // 函数调用,this指向windows
    
    

    JavaScript 中的构造函数很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。

    二、this可改变(重点)

    1.使用apply或call调用

    call和apply的作用是改变函数执行时的上下文,即改变函数运行时的this指向。二者的作用完全一样,区别只在于这两个函数接受的参数形式不同。

    var person = {
        name: 'Jeepeng',
        showName: function() {
            console.log(this.name);
        }
    };
    var newPerson = {name: 'Lily'};
    person.showName.call(newPerson);
    
    function foo(a, b, c) {}
    
    var bar = {};
    foo.apply(bar, [1, 2, 3]); 
    // 数组将会被扩展,如下所示
    foo.call(bar, 1, 2, 3); 
    // 传递到foo的参数是:a = 1, b = 2, c = 3
    

    当使用 Function.prototype 上的 call 或者 apply 方法时,函数内的 this 将会被 显式设置为函数调用的第一个参数。

    2.bind

    bind与call很相似,不过bind的返回值是函数

    var person = {
        name: 'Jeepeng',
        setName: function (name) {
            this.name = name;
        },
        showName: function() {
            console.log(this.name);
            (function() {
                this.setName('Lily');
            }.bind(this))();
        }
    };
    person.showName();
    

    3.箭头函数

    箭头函数并不绑定 this,arguments,super(ES6),抑或 new.target(ES6)。所有涉及它们的引用,都会沿袭向上查找外层作用域链的方案来处理。

  • 相关阅读:
    jquery $(document).ready() 与window.onload的区别
    【Ionic+AngularJS 开发】之『个人日常管理』App(二)
    【Ionic+AngularJS 开发】之『个人日常管理』App(一)
    移动App服务端架构设计
    jQuery 事件用法详解
    CSS实现的几款不错的菜单栏
    css清除浮动的方法总结
    常见浏览器的兼容问题
    推荐两个界面原型设计工具--GUIDesignStudio 和 Mockups For Desktop
    如何用js获取浏览器URL中查询字符串的参数
  • 原文地址:https://www.cnblogs.com/fengxuefei/p/6250543.html
Copyright © 2020-2023  润新知