博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中object与constructor的分析
阅读量:5937 次
发布时间:2019-06-19

本文共 3142 字,大约阅读时间需要 10 分钟。

 

 

 (本文转自:http://www.cnblogs.com/chengxiangboke/p/9932790.html)
什么是constructor属性?它来自哪里?又将会指向何处?
什么是constructor属性?
constructor是构造函数属性。
它来自哪里?
其实constructor属性是来自 prototy原型属性 所指向的那个对象的属性,如果不明白这里的“那个对象”具体指的是哪个对象,可以看看我上一章讲的javascript面向对象——prototype属性(原型属性),里面有着详细的讲解。
又将指向何处?
从constructor属性的字面意思我们就不难看出,它指向的永远都是构造函数。
例如:
我们看看下面代码:
function myfile(name,age){
this.webname = name;
this.age = age;
}
myfile.prototype.getname = function () {
return this.age;
}
var myfile1 = new myfile("zhang",3);
console.info(myfile1.constructor);
console.info(myfile.constructor);
console.info(myfile.prototype.constructor);
这里我打印了在3种不同情况下所输出的constructor构造函数属性的内容,我将谷歌浏览器控制台打印出的结果截图如下:

 

是的正如我们看见的为什么console.info(myfile1.constructor);打印出的结果与console.info(myfile.prototype.constructor);打印出的结果会是一样的,而console.info(myfile.constructor);打印出的结果却是ƒ
 Function() { [native code] },其实这个很好理解,如果你看了我的上一章讲解的javascript面向对象——prototype属性(原型属性)那么我相信这个地方就会很容易理解,其实我们首先要清楚constructor构造函数属性,它是谁的属性?它是原型属性prototype所指向的那个对象的属性。那么在这个对象中这个属性它又指向谁呢!?它指向的是构造函数也就是上面代码中的function
 myfile(name,age){this.webname = name; this.age = age;}这一部分,其值就是这个构造函数中的对象。
那么肯定会有人疑问,既然 
constructor构造函数属性 指向的是是构造函数,那么打印出的结果是构造函数这个可以理解但是为什么console.info(myfile.prototype.constructor);打印的也是构造函数呢!?它指向的可不是构造函数,是的我们知道实例化对象指向的一直都是prototype原型属性所指向的对象。如果想解决这个问题,那么我们首先应该弄明白两个问题。
1、实例化对象到底指向的是谁?
2、实例化对象到底继承的是谁?
首先我们还是用一个实例来引入,用图片看结果然后在总结:
代码部分:
function myfile(name,age){
this.webname = name;
this.age = age;
}
myfile.prototype.getname = function () {
return this.age;
}
var myfile1 = new myfile("zhang",3);
console.info(myfile1.constructor);
打印结果图片如下:
 
总结:代码执行的结果在控制台上显示的内容如上图,打印出的是构造函数的代码也就是代码部分
function myfile(name,age){
this.webname = name;
this.age = age;
}
的的内容,有人肯定会想,哎!!!这不很明显嘛,实例化对象指向的就是构造函数啊!继承的也是构造函数。
那么我们来运行另外一句代码:console.info(myfile1.getname());打印出的结果却是3。
 
什么情况在上面的构造函数中并没有getname()这个函数对象啊!为什么会打印出结果3呢!我们可以仔细看看getname()这个对象是在什么地方出现的,是的它是通过原型属性直接定义的,通过上面的两次打印我们可以很明显的发现实例化对象不仅能够打印出构造函数还能够打印出通过原型链来创建的属性以及属性值,换句话说,也就是实力化的对象继承的对象并不全是构造函数,而是指向了一个我们看不见的对象,这个对象里面包含的有构造函数,还有通过原型链来创建的属性,那么这个对象是什么呢!其实我们在创建构造函数的时候,每个构造函数都会有一个prototype原型属性,这个原型属性会指向一个我们看不见的对象,我们可以通过原型属性来创建固定不变的属性并赋值,如:myfile.prototype.getname
 = function () {return this.age;}这个时候原型属性所指向的对象不仅包含了构造函数还包含了通过原型属性所创建出来的一些属性。
上面两个问题的答案就出来了:
1、实例化对象到底指向的是谁?
答:实例化对象指向的永远是prototype原型属性所指向的那个对象,是通过实例化对象的内部属性[[prototype]]来实现的。
2、实例化对象到底继承的是谁?
答:其实实例化对象继承的还是prototype原型所指向的那个虚拟的对象。
总结constructor(构造函数属性):
这个时候我们在来看看 console.info(myfile1.constructor); console.info(myfile.constructor);
console.info(myfile.prototype.constructor);三个为什么第一个跟第三个的值是一样的但是第二个会出现
ƒ Function() { [native code] } 。
console.info(myfile.prototype.constructor);其实就是在告诉计算机我们要的结果是prototype原型属性所指向的那个对象中的构造函数,而因为console.info(myfile1.constructor);本来就是直接继承的就是prototype原型属性所指的对象所以这两个命令打印出的结果自然也都是来之那个虚拟的对象中,这就是为什么这两个代码所执行出来的结果是一样的原因。至于console.info(myfile.constructor);执行出来的结果是ƒ
 Function() { [native code] } 就更好理解了,native code
的意思就是 本机代码 其实意思就是告诉我们,我们所执行的console.info(myfile.constructor);代码就是构造函数它自己本身,不能所执行这条代码会报错,只是控制台会更智能一些的告诉我们,我们需要打印的就是它自己而已。
现在你知道了constructor构造函数属性是属于谁的属性吗?
答:
1、它是prototype原型属性所指向的那个虚拟对象的属性。
2、它是实例化对象的属性。
从上面的例子中我们也能推断出上面的两条答案是成立的。

转载于:https://www.cnblogs.com/dxz1/p/9933425.html

你可能感兴趣的文章
使用 GPUImage 实现一个简单相机
查看>>
CoinWhiteBook:区块链在慈善事业中的应用
查看>>
【二】express
查看>>
Mac上基于Github搭建Hexo博客
查看>>
What does corn harvester involve?
查看>>
阿里云服务器ECS开放8080端口
查看>>
前端常用排序详解
查看>>
Spring中实现监听的方法
查看>>
使用Tooltip会出现一个问题,如果行上出现复选框
查看>>
11.03T1 DP
查看>>
P2924 [USACO08DEC]大栅栏Largest Fence
查看>>
jQuery操作table tr td
查看>>
工作总结:MFC自写排序算法(升序)
查看>>
螺旋队列问题之二
查看>>
扩展运算符和解构赋值的理解
查看>>
焦点不在input或textarea中,屏蔽回格按钮
查看>>
后缀数组(suffix array)详解
查看>>
EF 通过DataAnnotations配置属性和类型
查看>>
手机H5显示一像素的细线
查看>>
Menu 菜单栏
查看>>