符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇“JavaScript中new的功能有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript中new的功能有哪些”文章吧。
创新互联建站服务项目包括上党网站建设、上党网站制作、上党网页制作以及上党网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,上党网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到上党省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
什么是new
呢?
new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。
光看定义还是有几分晦涩,直接看一个具体的例子,来了解一下JavaScript
中的new
实现的功能。
// 现实中瘦不了,但网络中一定要保持苗条 function Thin_User(name, age) { this.name = name; this.age = age; } Thin_User.prototype.eatToMuch = function () { // 白日做梦吧,留下肥胖的泪水 console.log('i eat so much, but i\'m very thin!!!'); } Thin_User.prototype.isThin = true; const xiaobao = new Thin_User('zcxiaobao', 18); console.log(xiaobao.name); // zcxiaobao console.log(xiaobao.age); // 18 console.log(xiaobao.isThin); // true // i eat so much, but i'm very thin!!! xiaobao.eatToMuch();
通过上面这个例子,我们可以发现xiaobao
可以:
访问到构造函数Thin_User
中属性
访问到Thin_User.prototype
中属性
描述得更直白一点,new
做了这些事:
创建了一个空对象,对象的__proto__->Thin_User.prototype
执行构造函数,并将this
指向新对象
返回新对象
由于new
是关键字,我们无法像模拟数组高阶方法一样覆盖,因此我们写一个函数createObject
,来模拟new
的效果。使用具体如下:
function Thin_User(name, age) {} const u1 = new Thin_user(...) const u2 = createObject(Thin_User, ...a\)
根据上面分析,createObject
编写的大致步骤为:
创建一个新对象obj
设置obj.__proto__->constructor.prototype
(但JavaScript不推荐直接修改__proto__属性,提供了setPrototypeOf方法来专门修改原型)
使用constructor.call/apply(obj, ...)
,将属性添加到obj
上
返回obj
__proto__和prototype
,可以看JavaScript之彻底理解原型与原型链call/apply
,可以看JavaScript之手撕call、apply
学习完这些,我们就可以编写第一版代码:
function createObject(Con) { // 创建新对象obj // var obj = {};也可以 var obj = Object.create(null); // 将obj.__proto__ -> 构造函数原型 // (不推荐)obj.__proto__ = Con.prototype Object.setPrototypeOf(obj, Con.prototype); // 执行构造函数 Con.apply(obj, [].slice.call(arguments, 1)); // 返回新对象 return obj;}
众所周知,函数是有返回值的,那构造函数如果有返回值,最终执行new
后返回的结果是怎样的那?
假设构造函数返回值为一个基本类型,我们来看一下最后的返回结果:
function Thin_User(name, age) { this.name = name; this.age = age; return 'i will keep thin forever'; } Thin_User.prototype.eatToMuch = function () { console.log('i eat so much, but i\'m very thin!!!'); } Thin_User.prototype.isThin = true; const xiaobao = new Thin_User('zcxiaobao', 18); console.log(xiaobao.name); // zcxiaobao console.log(xiaobao.age); // 18 console.log(xiaobao.isThin); // true // i eat so much, but i'm very thin!!! xiaobao.eatToMuch();
最后的返回结果好像受到任何干扰,难道构造函数不会对返回值进行处理吗?
不急,我们来接着测试一下返回值为对象的情况。
function Thin_User(name, age) { this.name = name; this.age = age; return { name: name, age: age * 10, fat: true } } Thin_User.prototype.eatToMuch = function () { // 白日做梦吧,留下肥胖的泪水 console.log('i eat so much, but i\'m very thin!!!'); } Thin_User.prototype.isThin = true; const xiaobao = new Thin_User('zcxiaobao', 18); // Error: xiaobao.eatToMuch is not a function xiaobao.eatToMuch();
当我执行eatToMuch
时,控制台直接报错,没有当前函数,于是我打印了xiaobao
对象:
发现xiaobao
对象的age
发生了改变,而且增加了fat
属性,正好与构造函数的返回值一样。
看完这两个例子,基本可以理清构造函数有返回值的情况:当构造函数返回值为对象时,直接返回这个对象。
function createObject(Con) { // 创建新对象obj // var obj = {};也可以 var obj = Object.create(null); // 将obj.__proto__ -> 构造函数原型 // (不推荐)obj.__proto__ = Con.prototype Object.setPrototypeOf(obj, Con.prototype); // 执行构造函数,并接受构造函数返回值 const ret = Con.apply(obj, [].slice.call(arguments, 1)); // 若构造函数返回值为对象,直接返回该对象 // 否则返回obj return typeof(ret) === 'object' ? ret: obj;}
以上就是关于“JavaScript中new的功能有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。