zoukankan      html  css  js  c++  java
  • js 理解new的运行机制

    先上段代码:

     1     function People(name) {
     2       this.name = name;
     3     }
     4 
     5     People.prototype.sayName = function () {
     6       console.log(this.name);
     7     }
     8 
     9     var man1 = new People('xiaos');
    10     console.log(man1.name)
    11     man1.sayName();

    接下来我们分析下上述代码:

    1. 1-3行我们创建了一个People的函数,应为将来要用作构造函数来实例化对象,所以首字母大写(这是好的习惯,也是一种默认的都会遵守的规定吧)

    2. 5-7在People的原型对象上添加了sayName方法,什么是原型对象呢?会有另外一篇文章来单独介绍,后续补充~~

    3. 第9行,使用new运算符实例化了一个man1对象。这是我们这篇要研究的问题,下面会详细阐述~

    4. 第10行打印输出man1的name,第11行调用man1的sayName方法

    那么问题来了,分析4中为什么能取到name属性和sayName方法呢??其实,这关键在于第3步,new的作用。

    那么new究竟做了什么呢?大致分三步,我们用代码分析下过程吧:

    1 var obj = {}; // 首先创建一个空的对象
    2 
    3 obj.__proto__ = People.prototype; // 将空对象的__proto__指向构造函数的原型对象,也就是这句导致上面实例化的对象man1拥有了sayName方法,其实这里是继承了原型对象上的sayName方法
    4 People.call(obj, 'xiaos'); // 调用People的构造方法,也就是这句导致man1拥有了name属性,有关call用法,本篇暂不介绍了,后续补充;这里简单理解就是People中的this变成了obj
    5 
    6 return obj; // 返回对象,此刻man1来接收,所以就同时拥有了People的构造函数中的属性还有原型上的方法
  • 相关阅读:
    Robotframework自动化6-基础关键字介绍(3)
    Robotframework自动化5-基础关键字介绍(2)
    Robotframework自动化4-基础关键字介绍(1)
    Robotframework自动化3-APP启动
    Robotframework自动化2-Windows环境搭建
    Robotframework自动化1-Windows环境搭建
    python2与python3同时安装
    Fiddler的基本界面介绍
    Fiddler的安装和APP抓包
    正则表达式
  • 原文地址:https://www.cnblogs.com/zhangxiaos/p/6150754.html
Copyright © 2011-2022 走看看