this指向问题和new的过程

本文详细介绍了JavaScript中的this指向规则,包括函数调用、事件监听、构造函数和箭头函数的情况。同时,深入讲解了new操作符的工作原理,从创建对象、原型赋值、函数执行到返回对象的全过程。通过实例解析了newFoo()执行的四个步骤,帮助理解JavaScript对象的创建和构造函数的使用。
摘要由CSDN通过智能技术生成

This的指向规则:

谁调用就指向谁。
事件监听函数内部,this会指向监听的那个元素节点。
在构造函数中,this指向New出来的新对象。
对于箭头函数,自身没有变量,所有指向环境中的this。
如果一个函数没有被调用,也就是普通调用,this指向全局变量。
在严格的情况下,this为Undefined。

new 的过程

若执行 new Foo(),过程如下:
1) 第一步:创建对象 obj;
2) 第二步:原型赋值
3) 第三步:Foo函数执行,this指向obj对象,给obj添加属性。
4) 第四步:判断构造函数是否返回对象数据类型,如果返回,则返回那个对象,如果没有返回则返回obj对象

  let a = new fn('张三', 20);

  function Foo(name, age) {
    this.name = name;
    this.age = age;
   // return { name: name }
  }
   Foo.prototype.fn = function () {
    console.log(this.name)
   }

   let a = new Foo('张三', 20);

  console.log(a);

  function fn() {
   // 第一步:创建对象
    var obj = {};
     // 第二步:原型赋值
     obj.__proto__ = Foo.prototype;
    // 第三步:Foo函数执行,this指向obj对象,给obj添加属性。
    let result = Foo.call(obj, '张三', 20)
     // 第四步:判断构造函数是否返回对象数据类型,如果返回,则返回那个对象,如果没有返回则返回obj对象
     return typeof result === 'object' ? result : obj;
   }
 let b = fn();
 console.log(b);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值