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 具有用于本机对象的内置构造函数:
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 布尔值。