JavaScript的构造函数

jiezi

5 年前

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

let obj = new LanguageFun("javaScript")

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

构造函数的执行过程：

创建一个新的对象 obj
obj 被执行原型链 [[prototype]] 连接
obj 绑定到函数调用的 this 上
没有其他返回对象，则返回 obj

包括我们知道的内置函数 Number(), String()都可以使用 new 操作符创建新的对象，这种函数在 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()执行过程：

对象创建：创建一个全新的对象：let obj = new Object();
[[prototype]]连接：obj.__proto__ = LanguageFun.prototype
this 绑定：this 指向刚创建的 obj 对象
执行 LanguageFun()函数
返回 this 对象

测试：


console.log(obj.__proto__ === LanguageFun.prototype); //true

当我们使用 new 操作符调用构造函数的时候没有问题，但是有时候我们会忘记使用 new 操作符，使用了普通函数的调用方式，产生异常，所以我们需要对 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

个人公众号：前端骑士。

专注前端技术分享，欢迎前端的小伙伴一起学习交流。

JavaScript的构造函数

兼容处理

最后