JavaScript 构造函数


目录

    显示目录


例子

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

笔记

使用大写首字母命名构造函数被认为是一种很好的做法。

对这个

在构造函数中 this 没有值。 它是新对象的替代品。 this 的值将成为新对象 创建一个新对象。

也可以看看:

JavaScript this 教程


对象类型(蓝图)(类)

前面章节中的示例有限。他们只创建单个对象。

有时我们需要一个“蓝图”来创建许多相同“类型”的对象。

创建“对象类型”的方法是使用对象构造函数

在上面的示例中,function Person() 是一个对象构造函数。

相同类型的对象是通过使用 new 关键字调用构造函数来创建的:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


是什么?

在 JavaScript 中,this 关键字指的是一个对象

哪个对象取决于this如何被调用(使用或调用)。

this 关键字根据其使用方式引用不同的对象:

  • 在对象方法中,this 引用对象

  • 单独而言,this 指的是全局对象

  • 在函数中,this 指的是全局对象

  • 在函数中,在严格模式下,this未定义

  • 在事件中,this 指的是接收事件的元素

  • call()apply()bind 等方法() 可以将 this 引用到任何对象

笔记

this 不是变量。这是一个关键字。您无法更改this 的值。

也可以看看:

JavaScript this 教程


向对象添加属性

向现有对象添加新属性很容易:

例子

myFather.nationality = "English";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add nationality to first object
myFather.nationality = "English";

// Display nationality 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>

</body>
</html>

该属性将添加到 myFather 中。不是给我妈妈的。 (不向任何其他人反对)。


向对象添加方法

向现有对象添加新方法很容易:

例子

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add a name method to first object
myFather.name = function() {
  return this.firstName + " " + this.lastName;
};

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

该方法将被添加到 myFather.不是给我妈妈的。 (不向任何其他人反对)。


向构造函数添加属性

您不能像您一样向对象构造函数添加新属性 向现有对象添加新属性:

例子

Person.nationality = "English";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// You can NOT add a new property to a constructor function
Person.nationality = "English";

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

要将新属性添加到构造函数,必须将其添加到 构造函数:

例子

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>

</body>
</html>

这样对象属性就可以有默认值。


向构造函数添加方法

您的构造函数还可以定义方法:

例子

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
   
this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

您不能像添加方法一样向对象构造函数添加新方法 现有对象的新方法。

向对象构造函数添加方法必须在 构造函数:

例子

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName;  
   
this.lastName = lastName;
   
this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
     
this.lastName = name;
  };
}

changeName() 函数将 name 的值分配给该人的 姓氏属性。

现在您可以尝试:

myMother.changeName("Doe");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(firstName,lastName,age,eyeColor) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  }
}
// Create a Person object
const myMother = new Person("Sally","Rally",48,"green");

// Change last name
myMother.changeName("Doe");

// Display last name
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>

</body>
</html>

JavaScript 知道你是谁 通过用myMother“替换”this来谈论。


内置 JavaScript 构造函数

JavaScript 具有用于本机对象的内置构造函数:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
const x1 = new String();   // A new String object
const x2 = new Number();   // A new Number object
const x3 = new Boolean();  // A new Boolean object
const x4 = new Object();   // A new Object object
const x5 = new Array();    // A new Array object
const x6 = new RegExp();   // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date();     // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>
</html>

Math() 对象不在列表中。 Math 是一个全局对象。 new 关键字不能用于 数学


你可知道?

正如您在上面看到的,JavaScript 具有原语的对象版本 数据类型字符串数字布尔 。但没有理由创建复杂的对象。原始值 更快:

使用字符串文字 "" 而不是 new String()

使用数字文字 50 而不是 new Number()

使用布尔文字 true/false 而不是 new Boolean()

使用对象字面量 {} 而不是 new Object()

使用数组文字 [] 而不是 new Array()

使用模式文字 /()/ 而不是 new RegExp()

使用函数表达式 () {} 而不是 new Function()

例子

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let x1 = "";      // string 
let x2 = 0;       // number
let x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

字符串对象

通常,字符串被创建为基元: firstName="John"

但也可以使用 new 关键字将字符串创建为对象:
firstName=new String("约翰")

了解为什么字符串不应在本章中创建为对象 JS 字符串。


数字对象

通常,数字被创建为基元:x=30

但也可以使用 new 关键字将数字创建为对象:
x=新 数量(30)

了解为什么数字不应在本章中创建为对象 JS 数字。


布尔对象

通常,布尔值被创建为基元: x = 错误

但布尔值也可以使用 new 关键字创建为对象:
x=new Boolean(false)

了解为什么布尔值不应该在本章中创建为对象 JS 布尔值。