`
tyny
  • 浏览: 75784 次
  • 性别: Icon_minigender_1
  • 来自: 黄冈
社区版块
存档分类
最新评论

javascript 构造函数续

阅读更多

 

上一节提到过,通过new新建的对象的构造函数其实是该对象原型所指向的构造函数,但是不是所有的原型都有构造函数,??,通过观察比较发现,一般情况下,通过new新建的对象是没有构造函数的,在Chrome和Opera浏览器里面可以直接查看到对象是没有constructor这个属性的,奇怪不?但是实际如此(之前我还一直才猜测,但是实际上,通过new新建的对象自身是没有constructor属性的,可以通过Object.getOwnPropertyNames查看)。也就是对象的constructor属性其实是对象的原型链从对象出发向上,找到最近的有constructor的原型对象,然后这个constructor就是该对象的constructor。看看这块代码

 

function A() { this.name="A";}
function B() { this.name="B";}
function C() { this.name="C";}
B.prototype = new A();
C.prototype = new B();
var a = new A();
var b = new B();
var c = new C();
console.log(a.constructor); //A()
console.log(b.constructor); //A()
console.log(c.constructor); //A()

 图1


为啥他们的构造函数都是A,顺着a,b,c的原型链(绿色)找,你会发现离对象最近的A.prototype有constructor属性,可能有人会问a,b,c的构造函数去那呢?上面已经强调过,正常情况下,他们本身没有constructor属性的,之所以c.constructor等有值,他是从他的原型链中找到的——即对象的原型链中离对象最近的有constructor属性的原型对象的构造函数。下面会证实这点在看看这段代码

 

function A() { this.name="A";}
function B() { this.name="B";}
function C() { this.name="C";}
function A1(){ this.name="A1";}

B.prototype = new A();
C.prototype = new B();
B.prototype.constructor=A1;

console.log((new A()).constructor); //A()
console.log((new B()).constructor); //A1()
console.log((new C()).constructor); //A1() 

  

 图2

可以发现通过B和C新建的对象的构造函数就是A1,其实就是绿色的原型链中最近的有constructor属性的原型对象的构造函数。这样可以解释很多构造函数方面的问题。

还有一个问题需要确认,如果是顺着原型链来确认构造函数,那个最终构造函数就是A

 

function A() { this.name="A";}
function B() { this.name="B";}
function C() { this.name="C";}
B.prototype = new A();
C.prototype = new B();
(new C()).constructor.tname='gui';
console.log(A.tname);//gui 

 没错,(new C()).constructor就是A,这个不用怀疑,不然那个"gui"从哪来的呢。


  • 大小: 33.1 KB
  • 大小: 37.1 KB
分享到:
评论

相关推荐

    如何编写高质量JS代码(续)

    函数可以独立实现其他语言中的多个不同的特性,例如,过程、方法、构造函数,甚至类或模块。 2.1 理解函数调用、方法调用以及构造函数调用之间的不同 针对面向对象编程,函数、方法和类的构造函数是三种不同的概念。...

    JavaScript经验总结

    - 创建数组有两种方式:一是通过 `new Array()` 构造函数,二是直接初始化数组元素。 - **数组排序**(续): - 对数组进行排序是非常实用的功能。 - 示例代码: ```javascript var numbers = [3, 1, 4, 1, 5,...

    Javascript 类与静态类的实现(续)

    在JavaScript中,我们可以使用函数作为构造函数创建类,并通过原型链实现继承。 静态类在JavaScript中的实现通常依赖于闭包,因为JavaScript没有内置的静态成员支持。闭包允许我们在函数内部创建私有变量和方法,...

    Humans_Emotions_Codes-:函数,对象和类(续... 2)和“继承”

    这里定义了一个名为`Human`的类,具有构造函数(用于初始化新对象)和`introduce`方法。`new`关键字用来创建类的实例,如`john`。 最后,我们讨论“继承”。继承是面向对象编程的一个关键特性,允许一个类(子类)...

    PHP动态输出JavaScript代码实例

    在构造JavaScript对象时,示例代码展示了如何将PHP变量嵌入到字符串中。这涉及到了PHP中的字符串插值,也就是通过花括号{ }将PHP变量包裹起来,这样变量就会在字符串中被其对应的值所替换。 知识点四:设置HTTP响应...

    java面试题续

    调用父类构造函数需要在子类构造函数的第一行通过`super([参数列表]);`实现。 3. **逻辑运算符区别**:如果将`&&`替换为`&`,那么表达式中的短路特性将被取消。也就是说,即使`a!=null`为`false`,`a.length()>10`...

    swfUpload上传文件图片(多图片)

    2. 初始化设置:在JavaScript代码中,通过调用`SwfUpload()`构造函数创建实例,并设置各种配置项,如上传URL、文件类型限制、最大文件大小等。 ```javascript var swfu = new SWFUpload({ upload_url: "upload....

    swfupload文件上传源码ASP

    - **初始化**:在HTML页面中,使用JavaScript调用SWFUpload构造函数来创建实例,配置相关参数,如上传URL、文件类型限制等。 - **事件绑定**:SWFUpload提供了丰富的事件接口,如文件选择、文件上传开始、上传进度...

    swfupload多图片上传PHP多图上传组件FLASH+JS

    - **创建实例**:调用SWFUpload构造函数创建组件实例。 - **事件绑定**:注册各种事件处理函数,如文件选择、文件上传成功、上传失败等。 - **启动上传**:调用组件的startUpload方法开始上传过程。 ### 4. PHP后端...

    webupload上传与下载文件,web实现文件上传下载,Java源码.zip

    2. 初始化WebUpload:在JavaScript中调用WebUploader构造函数,设置参数并监听事件。 3. 选择文件:用户在前端选择要上传的文件。 4. 文件预处理:WebUpload支持对文件进行预处理,如图片压缩、文件类型检查等。 5. ...

    Java中后台JSON转换包

    1. 创建JSON对象:你可以直接通过构造函数创建JSON对象,或者使用`JSONObject`的`put()`方法添加键值对。 ```java JSONObject obj = new JSONObject(); obj.put("name", "John"); obj.put("age", 30); ``` 2. ...

    MFC 中使用CEF内核实现简单浏览器

    在窗口类的构造函数中,初始化CEF的`CefBrowserHost`,并通过`CreateBrowser`函数创建一个新的浏览器实例。 4. **处理URL导航** 实现`OnNavigationStateChange`事件,监听浏览器的导航状态变化,例如加载开始、...

    30道iOS底层面试题(下)

    - Mach-O加载,包括查找适合的CPU部分、加载依赖的Mach-O文件、定位指针引用、执行构造函数和加载Category中的方法 - 程序执行,如main函数、UIApplicationMain等 4. **SDWebImage原理**: SDWebImage是一个用于...

    Winfrom 嵌入web网址,支持下载,上传一条龙服务!!!

    如果Web服务支持HTML5的File API,你还可以通过JavaScript在嵌入的`WebBrowser`控件中处理文件选择和上传,然后通过`WebBrowser.Document.InvokeScript`调用JavaScript函数来触发上传。 为了提供更好的用户体验,...

    Head First Ajax 深入浅出Ajax 高清原版

    - **事件处理**:介绍JavaScript中的事件机制,包括如何监听和触发事件,以及如何编写事件处理函数。 - **事件类型**:列举了各种类型的事件,如点击、鼠标移动等,并解释了它们的工作原理。 - **事件处理程序**:...

    HTML5网页设计课程标准.pdf

    JavaScript的学习是课程的重要组成部分,涉及基本语法、数据类型、运算符、流程控制、函数定义、对象构造和DOM操作。通过实际项目如旅游网站的机票预订页面制作,将理论知识与实践技能结合起来。 通过本课程的学习...

    java实现多文件异步上传

    此时,可以直接通过`FormData`构造函数将整个`<form>`对象作为参数传入,从而自动获取所有表单字段的值。 ```javascript function test() { var formData = new FormData($("#formId")[0]); var upload_url = ...

    matlab代码续行-google-code-prettify:自动从code.google.com/p/google-code-pretti

    4. **使用中括号({})**:在构造细胞数组或结构体时,也可以使用中括号进行多行续行。例如: ``` cellArray = { 'value1' 'value2' ... 'value3' 'value4'}; ``` 5. **使用函数块**:在函数定义或函数调用中,...

    uploder-files:基于百度上传文件插件webuploader 封装的上传文件组件,支持单页面多个上传组件

    这通常涉及调用特定的构造函数,并传递必要的配置参数,如上传URL、文件类型限制等。 2. **事件监听**:WebUploader和uploder-files都提供了丰富的事件系统,如`onSelect`(文件选择)、`onUploadStart`(上传开始...

    ajaxFileUpload.js

    - 发送请求:当用户点击上传按钮时,AjaxFileUpload.js会构造一个XMLHttpRequest对象,发送POST请求到指定的服务器端处理程序。 - 进度反馈:如果支持,可以提供进度条显示文件上传进度。 - 服务器处理:服务器接收...

Global site tag (gtag.js) - Google Analytics