前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript的构造函数

JavaScript的构造函数

原创
作者头像
伯爵
修改2019-10-09 10:53:19
9970
修改2019-10-09 10:53:19
举报
文章被收录于专栏:前端小菜鸟

在Java语言中,我们使用构造函数是实例化对象的过程,在JavaScript语言中我们可以使用构造函数的方式创建对象,如:

代码语言:javascript
复制
let obj = new LanguageFun("javaScript") 

与面向对象的语言不同,JavaScript使用构造函数创建对象不是真正意义上的实例化,而是通过new操作符调用的构造函数。

构造函数的执行过程:

1. 创建一个新的对象obj

2. obj被执行原型链[[prototype]]连接

3. obj绑定到函数调用的this上

4. 没有其他返回对象,则返回obj

包括我们知道的内置函数Number(), String()都可以使用new操作符创建新的对象,这种函数在JavaScript中称为构造函数的调用。我们可以通过实例理解这个过程:

代码语言:javascript
复制
function LanguageFun(name){
    this.name = name
    this.sayHello = function(){
        console.log("Hello , ",this.name)
    }
}

let obj = new LanguageFun("javaScript") 
obj.sayHello(); // Hello ,  javaScript

new LanguageFun()执行过程:

1. 对象创建:创建一个全新的对象: let obj = new Object();

2. [[prototype]]连接:obj.__proto__ = LanguageFun.prototype

3. this绑定:this指向刚创建的obj对象

4. 执行LanguageFun()函数

5. 返回this对象

测试:

代码语言:javascript
复制
console.log(obj.__proto__ === LanguageFun.prototype); //true

兼容处理

当我们使用new操作符调用构造函数的时候没有问题,但是有时候我们会忘记使用new操作符,使用了普通函数的调用方式,产生异常,所以我们需要对JavaScript的构造函数进行兼容改造。

代码语言:javascript
复制
function LanguageFun(name){
    if(!(this instanceof LanguageFun)) {
        return new LanguageFun(name)
    }
    this.name = name
    this.sayHello = function(){
        console.log("Hello , ",this.name)
    }
}

let obj1 = new LanguageFun("javaScript") 
let obj2 =  LanguageFun("javaScript") 

obj1.sayHello(); // Hello ,  javaScript
obj2.sayHello(); // Hello ,  javaScript

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档