zoukankan      html  css  js  c++  java
  • Javascript的无new构建

    看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下

    第一种方式:

    var A = function(){

    return A.prototype.init();

    }

     

    A.prototype = {

    init:function(){

    this.age = 50;

    console.log(this);

    return this;

    },

    age:100

    }

     

    console.log(A() === new A());

     

     

    1.分析下结果为什么为true

    A()内部调用的是A.prototype.init()函数

    new A() 内部会调用构造函数,而它的构造函数就是function(){return A.prototype.init();},同样调用的是A.prototype.init()函数

    2.分析下A.prototype.init()函数返回什么

    那就要看this了,判断this指向谁,我们要在函数调用的时候分析,由于它是作为原型对象的属性调用的,所以this就是原型对象A.prototype

    这种创建方式,无论你调用多少次A(),他们其实都是返回的同一个对象,所以对b对象的修改会影响a对象,见下图

     

    var a = A();

    var b = A();

    console.log(a.age);

    console.log(b.age);

    b.age = 22;

    console.log(a.age);

    console.log(b.age);

     

     

    那么如何解决这种问题呢,接下来就讲下第二种方式,它也是jquery采用的方式

     

    第二种方式

    var A = function(){

    return new A.prototype.init();//

    }

     

    A.prototype = {

    init:function(){

    this.age = 50;

    console.log(this);

    return this;

    },

    age:100

    }

    A.prototype.init.prototype = A.prototype;//

     

    var a = new A();

    var b = new A();

    console.log(a===b);

    console.log(a.age);

    console.log(b.age);

    b.age = 22;

    console.log(a.age);

    console.log(b.age);

     

     

    分析下①和②

    ①中new A.prototype.init()主要做了三件事

    创建一个空对象var obj = {};

    obj对象属性_proto_指向函数A.prototype.initprototype;

    A.prototype.init函数的this替换成obj对象,在调用A.prototype.init函数,A.prototype.init.call(obj),并返回新对象

    因为①返回的对象的原型是A.prototype.init.prototype,它和A.prototype并没什么关系,为了使新返回的对象可以继承自A.prototype,所以②让A.prototype.init.prototype指向A.prototype

    所以方式二即创建了实例,又保证了各自的作用域独立。

  • 相关阅读:
    关于LEA指令(单周期就可以做简单的算术计算)
    说说字符集和编码(非常形象,非常有意思)
    类依赖项的不透明性和透明性
    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(6)-Unity 2.x依赖注入by运行时注入[附源码]
    大端和小端
    Google C++测试框架系列:入门
    随机森林中的数学基础之大数定律
    K-means Algorithm
    JavaScript插件——按钮
    分布式系统设计(8)
  • 原文地址:https://www.cnblogs.com/tao0622/p/5490233.html
Copyright © 2011-2022 走看看