一、js中new一个对象的过程

  首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤:

  1、创建一个新对象:

  var obj = {};

  2、设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象;

  obj.__proto__ = ClassA.prototype;

  3、使用新对象调用函数,函数中的this被指向新实例对象:

  ClassA.call(obj);  //{}.构造函数()

  4、将初始化完毕的新对象地址,保存到等号左边的变量中

  注意:若构造函数中返回this或返回值是基本类型(number、string、boolean、null、undefined)的值,则返回新实例对象;若返回值是引用类型的值,则实际返回值为这个引用类型。

var foo = "bar";
function test () {
  this.foo = "foo";
}
new test();      //test中的this指新对象,并未改变全局的foo属性
console.log(this.foo); // "bar"
console.log(new test().foo); // "foo";

二、用原生JS实现new方法

// 通过分析原生的new方法可以看出,在new一个函数的时候,
// 会返回一个func同时在这个func里面会返回一个对象Object,
// 这个对象包含父类func的属性以及隐藏的__proto__
function New(f) {
//返回一个func
return function () {
var o = {"__proto__": f.prototype};
f.apply(o, arguments);//继承父类的属性
return o; //返回一个Object
}
}

  首先写一个父类方法(包含参数name,age):

function Person(name,age){
this.name = name;
this.age = age;
}
//new一个Person的实例p1做研究对比

var p1 = new Person("Richard", );
//此时p1包含name、age属性,同时p1的__proto__指向Person的prototype
p1.name;//Richard
p1.age;//

  通过自定义New方法创建一个实例对象p2:

var p2 = New(Person)("Jack",);
p2.name;//Jack
p2.age;//

  此时p2 instanceof Person 返回的是true;

Person.prototype.gender ="male";
p1.gender//male
p2.gender//male

三、优先级问题

  优先级由高到低:小括号(xxx)  >  属性访问.   >  new foo()  >  foo()

  注意new Foo()优先级高于Foo();

function getName(){
console.log()
}
function Foo() {
this.getName = function () {
console.log();
};
return this;
}
Foo.getName = function () {
console.log();
};
//先从.属性访问符号开始往前面找一个最近的对象,同时注意new Foo()优先于Foo();
var a=new Foo.getName();//3;
属性.的优先级高于new foo(),所以===new (Foo.getName)();返回Foo.getName类型的实例
var b=new Foo().getName();//2;
new foo()的优先级高于foo(),所以就相当于new foo()的属性,===(new Foo()).getName();返回undefined
var c=new new Foo().getName();//2;
new foo()优先级低于属性.,所以其实相当于就是new一个new foo()的getName属性函数,===new (new Foo().getName)();返回Foo.getName类型的实例
new Date().getTime();//===((new Date()).getTime)()
(new Date).getTime();//===((new Date()).getTime)()
new Date.getTime();//Uncaught TypeError: Date(...).getTime is not a function;===new (Date.getTime)()

  需要注意的是:new Date 其实也是正确的,和new Date()一样

原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  3. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  4. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  5. 转载 -- 基于原生JS与OC方法互相调用并传值(附HTML代码)

    最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点就是方法的互相调用而已. 本文叙述下如何进行原生的JavaScript交互 本 ...

  6. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  7. 扩展原生js的一些方法

    扩展原生js的Array类 Array.prototype.add = function(item){ this.push(item); } Array.prototype.addRange = fu ...

  8. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  9. 绑定弹窗事件最好的方法,原生JS和JQuery方法

    使用jQuery ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $( ...

随机推荐

  1. MySQL Replication(Master与Slave基本原理及配置)

    MySQL Replication(Master与Slave基本原理及配置) 1.  主从mysql server的工作原理:(如图及其过程分析) 过程:   Mysql的复制(replication ...

  2. c# 实现获取汉字十六进制Unicode编码字符串

    1.  汉字转十六进制UNICODE编码字符串 /// <summary>        /// ////        /// </summary>        /// & ...

  3. USBDM RS08/HCS08/HCS12/Coldfire V1,2,3,4/DSC/Kinetis Debugger and Programmer -- Software Install

    Installation of USBDM for Windows Under Windows, installation is done with a standard Windows MSI fi ...

  4. How to create .gitignore file in Windows Explorer

    How to create .gitignore file I need to add some rules to my .gitignore file, however, I can't find ...

  5. In-Place upgrade to Team Foundation Server (TFS) 2015 from TFS 2013Team Foundation Server TFS TFS 2015 TFS upgrade TFS with Sharepoint

    This upgrade document gives detailed step by step procedure for the In-Place upgrade from TFS 2013 t ...

  6. 阅读Linux内核源码时建立tags索引

    比如在阅读arm架构的Linux内核代码时想建立arm架构相关的索引,可以使用下面的命令: make ARCH=arm tags

  7. Tomcat 负载均衡 及Session共享

    原文:https://www.sunjianhua.cn/archives/tomcat-high-availability.html 一.安装java环境 二.安装tomcat(apache-tom ...

  8. UICollectionView 相关

    当数据不多,collectionView.contentSize小于collectionView.frame.size的时候,UICollectionView是不会滚动的 self.Cov.alway ...

  9. Windows 同一时候开启核心显卡与独立显卡(不接显示器启动核芯显卡)

    採用Mp4视频压缩格式编码时,非常耗CPU.所以决定上显卡.进行显卡加速.选择了Intel核心显卡进行视频编码加速,效果非常理想.但如今的问题是:在PC上如何同一时候开启核心显卡与独立显卡.经过几番周 ...

  10. 关于spring session redis共享session的跨子域的处理

    安装完redis, spring端只要下面这两个bean配置上就可以用了 <?xml version="1.0" encoding="UTF-8"?> ...