JavaScript-构造函数
什么是构造函数
- 构造函数和工厂函数一样, 都是专门用于创建对象的
- 构造函数本质上是工厂函数的简写
构造函数和工厂函数的区别
- 构造函数的函数名称
首字母必须大写- 构造函数只能够通过
new来调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function Person(name, age) {
/*
系统自动添加的
let obj = {};
let this = obj;
return this;
**/
this.name = name;
this.age = age;
this.say = function () {
console.log("hello world");
}
}
</script>
</head>
<body>
</body>
</html>
🐤当我们 new Person("BNTang", 34); 系统做了什么事情。
- 会在构造函数中自动创建一个对象
- 会自动将刚才创建的对象赋值给
this- 会在构造函数的最后自动添加
return this;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function Person(name, age) {
/*
系统自动添加的
let obj = {};
let this = obj;
return this;
**/
this.name = name;
this.age = age;
this.say = function () {
console.log("hello world");
}
}
let objOne = new Person("tyh", 34);
let objTwo = new Person("zs", 44);
console.log(objOne);
console.log(objTwo);
</script>
</head>
<body>
</body>
</html>
🐤方法中的 this 谁调用就是谁, 所以如果当前是 objOne 调用, 所以当前的 this 就是 objOne。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function Person(name, age) {
/*
系统自动添加的
let obj = {};
let this = obj;
return this;
**/
this.name = name;
this.age = age;
this.say = function () {
console.log(this.name, this.age);
}
}
let objOne = new Person("tyh", 34);
let objTwo = new Person("zs", 44);
objOne.say();
objTwo.say();
</script>
</head>
<body>
</body>
</html>
由于两个对象中的 say 方法的实现都是一样的, 但是保存到了不同的存储空间中，所以有性能问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function Person(name, age) {
/*
系统自动添加的
let obj = {};
let this = obj;
return this;
**/
this.name = name;
this.age = age;
this.say = function () {
console.log("hello world");
}
}
let objOne = new Person("tyh", 34);
let objTwo = new Person("zs", 44);
// false
console.log(objOne.say === objTwo.say);
</script>
</head>
<body>
</body>
</html>
通过三个等号来判断两个函数, 表示判断两个函数是否都存储在同一块内存中，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function demo() {
console.log("demo");
}
// true
console.log(demo === demo);
</script>
</head>
<body>
</body>
</html>
构造函数优化上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say() {
console.log("hello world");
}
function Person(name, age) {
this.name = name;
this.age = age;
this.say = say;
}
let objOne = new Person("lnj", 34);
let objTwo = new Person("zs", 44);
// true
console.log(objOne.say === objTwo.say);
</script>
</head>
<body>
</body>
</html>
🐤当前这种方式解决之后，存在的弊端。
- 阅读性降低了
- 污染了全局的命名空间
构造函数优化中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let fns = {
say: function () {
console.log("hello world");
}
}
function Person(name, age) {
this.name = name;
this.age = age;
this.say = fns.say;
}
let objOne = new Person("tyh", 34);
let objTwo = new Person("zs", 44);
// true
console.log(objOne.say === objTwo.say);
</script>
</head>
<body>
</body>
</html>
由于 test 函数都是属于同一个对象, 所以返回 true。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let fns = {
test: function () {
console.log("test");
}
}
</script>
</head>
<body>
</body>
</html>
构造函数优化下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
say: function () {
console.log("hello world");
}
}
let objOne = new Person("tyh", 34);
let objTwo = new Person("zs", 44);
objOne.say();
objTwo.say();
// true
console.log(objOne.say === objTwo.say);
console.log(Person.prototype);
</script>
</head>
<body>
</body>
</html>
如上的 prototype 下个文章当中在进行介绍。
