js的new运算符详解

2020-06-17  本文已影响0人  吃自己家大米

new 后面需要跟一个函数(此时这个函数就称作构造函数)用来创建并初始化对象。这种方式创建的对象分两种,一种是js本身的内置构造函数,一种是用户自定义的构造函数。

1.内置构造函数

var obj=new Object();
var arr=new Array();
var date=new Date();
var reg=new RegExp();
......
等等

此外 string、number 和 boolean 这三个原始类型对应的 new String()、new Number() 和 new Boolean() 被创建出来的特别被称为 包装对象【关联:js的包装对象】

2.自定义构造函数

一般用这个自定义类,约定首字母大写,以方便判断是不是配合 new 创建对象用的,不然其自身作为普通的函数调用是没什么意义的。

通过 new 自定义对象只需要两步:
(1)编写一个函数定义对象类型(以下定义了 Vegetable 类型);
(2)使用 new 创建对象实例。

var Vegetable = function () {   //蔬菜类
    this.spinage = 'spinage';
}
Vegetable.prototype.stock = function (name) {
    this[name] = name;
}
Vegetable.prototype.eat = function (name) {
    delete this[name];
}
var vege = new Vegetable();

vege.stock('potato');
vege.stock('spinage');

var Animal=function(params){    //动物类
    this.default=params;
}
Animal.prototype.eat=function(name){   
    this[name]=name;
}
var cat=new Animal({legs:4,color:'blue'});

3.new constructor[([arguments])] 执行过程

拿上面的 Vegetable 举例。

(1)创建继承自构造函数的新空对象——{}的 __proto__ 为 stock:f(name)、eat:f(name)、constructor:f()、__proto__:Object;
(2)运行构造函数,并将 this 指向这个新对象——运行后,this指代新对象,{}则自然变成了{spinage:spinage}, __proto__ 不变;
(3)最后(2)的新对象赋值给 vege
(4)特别有一点,如果 Vegetable 是有返回值,看下面的代码(一般不会这么写)。那么最后赋值给 vege 的就不是 (2)中的新对象,因为被返回值给覆盖掉了。这样后面的两个调用语句自然会报错,因为vege并没有继承到 Vegetable 定义的 prototype。

var Vegetable = function () {
    this.spinage = 'spinage';
    return {
      tomato:'tomato'
    }
}
Vegetable.prototype.stock = function (name) {
    this[name] = name;
}
Vegetable.prototype.eat = function (name) {
    delete this[name];
}

var vege = new Vegetable();

vege.stock('potato');  // 此时这里会报错
vege.stock('spinage');  // 此时这里会报错

4、另外两种创建对象方法

(1)对象直接量
就是直接赋值

var obj={};
var obj2={name:'amy'};
......

(2)Object.create()
以一个对象为原型创建另一个新对象。

var obj=Object.create({a:'123'});

var o={b:'b'};
var obj2=Object.create(o);

......

感谢阅读,喜欢的话点个赞吧:)
更多内容请关注后续文章。。。

上一篇下一篇

猜你喜欢

热点阅读