关于new命令

mac2024-01-27  35

前言

JS中有一种说法,叫做一切皆为对象。对象是什么呢?大话来讲,对象是一种容器,里面封装了属性和方法。在每天编程中,最基本的事情也是频繁的干的事情就是创建一个对象,然后使用它干各种各样的事情。创建对象的方法有构造函数创建、语法糖创建、还有new命令创建。当然,本文的标题已经表明这次的主角是new关键字了。

new的基本用法

new命令的作用,就是执行构造函数,返回一个实例对象。

ps:如果忘了使用new命令,构造函数就变成了普通函数,并不会生成实例对象。

// 1、不带参数情况 var Vehicle = function () { this.price = 1000; }; var v = new Vehicle(); v.price // 1000 // 2、带参数情况 var Vehicle = function (p) { this.price = p; }; var v = new Vehicle(500);

当然,为了保证构造函数必须与new命令一起使用两种方法。

方法一:构造函数内部使用严格模式,即第一行加上use strict。这样的话,一旦忘了使用new命令,直接调用构造函数就会报错。

function Fubar(foo, bar){ 'use strict'; this._foo = foo; this._bar = bar; } Fubar() // TypeError: Cannot set property '_foo' of undefined

方法二:构造函数内部判断是否使用new命令,如果发现没有使用,则直接返回一个实例对象。

function Fubar(foo, bar) { if (!(this instanceof Fubar)) { return new Fubar(foo, bar); } this._foo = foo; this._bar = bar; } Fubar(1, 2)._foo // 1 (new Fubar(1, 2))._foo // 1

new原理详解

面试的时候常常会问道,使用new命令时,会发生什么。

1、创建一个空对象,作为将要返回的对象实例。

2、将这个空对象的原型,指向构造函数的prototype属性。

3、将这个空对象赋值给函数内部的this关键字。

4、开始执行构造函数内部的代码。

从上面步骤可以看出,其构造函数内部,通过this指的就是新生对象。 如果你对this不是很清楚,可以看我的另一篇文章 关于this、call、applay和bind。

注意:如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象;否则,就会不管return语句,返回this对象。

例子1

var Vehicle = function () { this.price = 1000; return 1000; }; (new Vehicle()) === 1000 // false

例子2

var Vehicle = function (){ this.price = 1000; return { price: 2000 }; }; (new Vehicle()).price // 2000

另一方面,如果对普通函数(内部没有this关键字的函数)使用new命令,则会返回一个空对象。

function getMessage() { return 'this is a message'; } var msg = new getMessage(); msg // {} typeof msg // "object"

new关键字的内部流程

function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) { // 将 arguments 对象转为数组 var args = [].slice.call(arguments); // 取出构造函数 var constructor = args.shift(); // 创建一个空对象,继承构造函数的 prototype 属性 var context = Object.create(constructor.prototype); // 执行构造函数 var result = constructor.apply(context, args); // 如果返回结果是对象,就直接返回,否则返回 context 对象 return (typeof result === 'object' && result != null) ? result : context; } // 实例 var actor = _new(Person, '张三', 28);
最新回复(0)