一、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. Codeforces Round #368 (Div. 2) B. Bakery 水题

    B. Bakery 题目连接: http://www.codeforces.com/contest/707/problem/B Description Masha wants to open her ...

  2. ConcurrentHashMap内存溢出问题

    写在前面 上周,同事写了一段ConcurrentHashMap的测试代码,说往map里放了32个元素就内存溢出了,我大致看了一下他的代码及运行的jvm参数,觉得很奇怪,于是就自己捣鼓了一下.首先上一段 ...

  3. Hadoop化繁为简(一)-从安装Linux到搭建集群环境

    简介与环境准备 hadoop的核心是分布式文件系统HDFS以及批处理计算MapReduce.近年,随着大数据.云计算.物联网的兴起,也极大的吸引了我的兴趣,看了网上很多文章,感觉还是云里雾里,很多不必 ...

  4. Chrome 开发者工具中的命令菜单

    单 大家对命令菜单(Command Menu)应该都不陌生.目前主流的编辑器中都内置了对该功能的支持.在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ct ...

  5. C++ 实践总结

     对于一个应用程序而言,静态链接库可能被载入多次,而动态链接库仅仅会被载入一次. Gameloft面试之错误一 Event: 面试官说例如以下程序是能够链接通过的. class Base { Pu ...

  6. (转)Java中的守护线程

    Java的守护线程与非守护线程   守护线程与非守护线程 最近在看多线程的Timer章节,发现运用到了守护线程,感觉Java的基础知识还是需要补充. Java分为两种线程:用户线程和守护线程 所谓守护 ...

  7. java hash表

    当使用一个哈希表,要指定用作键的对象,以及要链接到该键的值. 然后,该键经过哈希处理,所得到的散列码被用作存储在该表中值的索引. Hashtable定义了四个构造方法.第一个是默认构造方法: Hash ...

  8. Quartz 定时任务设置某个时间区间每隔一定时间触发的cron表达式

    原文:https://blog.csdn.net/yansong_8686/article/details/46991189 Cron表达式 Quartz使用类似于Linux下的Cron表达式定义时间 ...

  9. EXCEL密码破解/破解工作表保护密码

    网上有很多这个代码,但很多朋友并不太了解如何运用在此做了一些整理,希望对大家有所帮助! 注:很多时候会因为忘记密码丢失重要EXCEL文件而烦恼,这份代码就能帮你找回,仅仅出之这个初衷,如因为这个代码让 ...

  10. Linux学习6-CentOS搭建appium服务

    前言 用过appium的应该清楚,每次都需要先启动appium服务,然后再运行代码非常不方便,像selenium就不用启动服务,直接运行脚本. appium实际上只是提供服务,所以我想把它搭建到阿里云 ...