栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

this的学习

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

this的学习

  • 解析器在调用函数时,每次都会向函数内部传递一个隐含的参数this,

  • 这个隐含参数就是this, this指向的是一个对象,

  • 这个对象我们称为函数执行的上下文对象

  • 根据函数的调用方式的不同,this会指向不同的对象

    • 1.以函数的形式调用时,this指向的是window

    • 2.以方法的形式调用时,this就是调用方法的那个对象

    • 3.当以构造函数的形式调用时,this就是新创建的那个对象

    • 4.使用call()和apply()调用时,this就是call()和apply()第一个参数的对象

    • 5.使用bind()()调用时,this就是bind()第一个参数的对象


  • *this 永远指向最后调用它的那个对象**

functionfn(){   
             console.log(this);//window
 }
  fn();

上面例子直接执行函数,这时的this指向window

下面再来个例子:

function fn(){
    console.log(this);
 }
   let obj = {
    name: '阿离王',
    fn: fn,
 };
 obj.fn();

这时上面的例子打印的this 指向 obj对象了

let name = '全局name';
function fn(){
    console.log(this.name);
 }
 let obj = {
    name: '阿离王',
    fn:fn
 };
 let obj2 = {
    name: '张三',
    fn
  }
  fn(); // 全局name
  obj.fn(); // 阿离王
  obj2.fn(); // 张三
构造函数
  • 使用new关键词调用的函数,是构造函数(constructor)

  • 构造函数是专门用来创建对象的函数

  • 构造函数就是一个普通的函数,

  • 不同的是,构造函数习惯上函数名首字母大写(不成文规范)

  • 构造函数和普通函数的区别就是调用方式的不同

  • 普通函数是直接调用,而构造函数需要使用new关键字来调用

构造函数的执行流程:

  • 1.立刻创建一个新的对象(在内存开辟一个新空间)

  • 2.将新建的对象设置为函数中的this的指向新建的对象,在构造函数中可以使用this来引用新建的对象

  • 3.逐行执行函数中的代码

  • 4.将新建的对象作为返回值返回

使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类

我们将通过一个构造函数创建的对象,称为是该类的实例, new 一个构造函数,我们称为实例化一个对象出来

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    }
  }
    let per = new Person('阿离王', 28);
    let per1 = new Person('张三', 20);
    let per2 = new Person('李四', 19);
    console.log(per);
    console.log(per1);
    console.log(per2.sayName());
    function Dog(){
    }
    let dog = new Dog();
    console.log(dog);
call() 和 apply()
  • 这两个方法都是函数对象的方法,需要通过函数来调用

  • 当对函数调用call()和apply()都也会调用原函数

  • 在调用call()和apply()时,第一个参数为一个对象 此时这个对象将会成为函数执行时的this

function fn(a, b){
    console.log(a, b);
    console.log(this);
 }
    let obj = {name: 'yu'};
    fn.call(obj, 1, 2);
    fn.apply(obj, [3, 4]);
    let obj2 = {
    name: '阿离王',
    sayName: function(){
        console.log(this.name);
    }
  }
  let obj3 = {name: 'obj3'}
  obj2.sayName.call(obj3);
bind()

bind() 是创建一个新的函数,我们必须要手动去调用:

所以得写成bind()()

function fn(a, b){
    console.log(a, b);
    console.log(this);
 }
    let obj = {name: 'yu'};
    fn.call(obj, 1, 2);
    fn.apply(obj, [3, 4]);
    fn.bind(obj, 5, 6)();


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/244257.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号