RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
JavaScript中new有什么用-创新互联

这篇文章给大家分享的是有关JavaScript中new有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站是一家集做网站、成都网站制作、网站页面设计、网站优化SEO优化为一体的专业网站设计公司,已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步,服务才是根本,我们始终坚持讲诚信,负责任的原则,为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

为了保证可读性,本文采用意译而非直译。

JavaScript中new有什么用

当你使用new的时候,会:

  1. 创建一个新的空对象;

  2. this绑定到该对象;

  3. 添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype);

  4. 返回该this对象。

如果你没有特别理解,那么我们接下来用例子来详细解释。首先定义一个构造函数Student,该函数接收两个参数nameage

function Student(name, age){
  this.name = name;
  this.age = age;
}

现在我们使用new来创建一个新的对象:

var first = new Student('John', 26);

到底发生了什么呢?

  1. 一个新的对象创建,我们叫它obj

  2. this绑定到obj,任何对this的引用就是对obj的引用;

  3. __proto__属性被添加到obj对象。obj.__proto__会指向Student.prototype

  4. obj对象被赋值给first变量。

我们可以通过打印测试:

console.log(first.name);
// John

console.log(first.age);
// 26

接下来深入看看__proto__是怎么回事。

原型(Prototype)

每一个JavaScript对象都有一个原型。所有的对象都从它的原型中继承对象和属性。

打开浏览器开发者控制面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J),输入之前定义的Student函数:

function Student(name, age) {
  this.name = name;
  this.age = age;
}

为了证实每一个对象都有原型,输入:

Student.prototype;
// Object {...}

你会看到返回了一个对象。现在我们来尝试定义一个新的对象:

var second = new Student('Jeff', 50);

根据之前的解释,second指向的对象会有一个__proto__属性,并且应该指向父亲的prototype,我们来测试一下:

second.__proto__ === Student.prototype
// true

Student.prototype.constructor会指向Student的构造函数,我们打印出来看看:

Student.prototype.constructor;
//  function Student(name, age) {
//    this.name = name;
//    this.age = age;
//  }

好像事情越来越复杂了,我们用图来形象描述一下:JavaScript中new有什么用

Student的构造函数有一个叫.prototype的属性,该属性又有一个.constructor的属性反过来指向Student构造。它们构成了一个环。当我们使用new去创建一个新的对象,每一个对象都有.__proto__属性反过来指向Student.prototype

这个设计对于继承来说很重要。因为原型对象被所有由该构造函数创建的对象共享。当我们添加函数和属性到原型对象中,其它所有的对象都可以使用。

在本文我们只创建了两个Student对象,如果我们创建20,000个,那么将属性和函数放到prototype而不是每一个对象将会节省非常很多的存储和计算资源。

我们来看一个例子:

Student.prototype.sayInfo = function(){
  console.log(this.name + ' is ' + this.age + ' years old');
}

我们为Student的原型添加了一个新的函数sayInfo -- 所以使用Student创建的学生对象都可以访问该函数。

second.sayInfo();
// Jeff is 50 years old

创建一个新的学生对象,再次测试:

var third = new Student('Tracy', 15);
// 如果我们现在打印third, 虽然只会看到年龄和名字这两个属性,
// 仍然可以访问sayInfo函数。
third;
// Student {name: "Tracy", age: 15}
third.sayInfo();
// Tracy is 15 years old

在JavaScript中,首先查看当前对象是否拥有该属性;如果没有,看原型中是否有该属性。这个规则会一直持续,直到成功找到该属性或则到最顶层全局对象也没找到而返回失败。

继承让你平时不需要去定义toString()函数而可以直接使用。因为toString()这个函数内置在Object的原型上。每一个我们创建的对象最终都指向Object.prototype,所以可以调用toString()。当然, 我们也可以重写这个函数:

var name = {
  toString: function(){
    console.log('Not a good idea');
  }
};
name.toString();
// Not a good idea

创建的name对象首先查看是否拥有toString,如果有就不会去原型中查找。

感谢各位的阅读!关于“JavaScript中new有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文题目:JavaScript中new有什么用-创新互联
文章出自:http://lswzjz.com/article/dpoepo.html