JavaScript - Objects

本文主要是介绍JavaScript - Objects，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

对象定义：

    let person = {name: {first: "Bob",last: "smith"},age: 32,gender: 'male',interests: ['music', 'skiing'],bio: function () {alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');},greeting: function () {alert('Hi! I\'m ' + this.name[0] + '.');}};
/*
对象访问方式
person.name.first
person.name.last
person.age
person.interests[1]
person.bio()person['age']
person['name']['first']
*/

更新对象成员：

// 更新对象现有成员的值
person.age = 45;
person['name']['last'] = 'Cratchit';// 对象中加入新成员
person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }let myDataName = 'height';
let myDataValue = '1.75m';
person[myDataName] = myDataValue;

对象中 'this' 关键字：

this 关键字代表当前对象的实体。

创建对象实体：

    function createNewPerson(name) {let obj = {};obj.name = name;obj.greeting = function () {alert("Hi! I\'m " + name + ".");};return obj;}let salva = createNewPerson("Salva");salva.name;salva.greeting();// 類構造函數
function Person(first, last, age, gender, interests) {this.name = {'first': first,'last' : last};this.age = age;this.gender = gender;this.interests = interests;this.bio = function() {alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');};this.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');};
}
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
/*
person1['age']
person1.interests[1]
person1.bio()
// etc.
*/

其他创建对象实体的方式：

Object() 构造器

// 使用 Object() 构造器，创建一个空白的对象
var person1 = new Object();
// 之后给空白对象，加入属性和方法
person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {alert('Hi! I\'m ' + this.name + '.');
};var person1 = new Object({name: 'Chris',age: 38,greeting: function() {alert('Hi! I\'m ' + this.name + '.');}
});

使用 JavaScript 内置的 create() 方法创建对象，该方法会基于已存在的对象，来创建另一个对象。被创建对象会拥有同所基于对象相同的属性和方法。

注意：IE8 不支持通过 create() 方法创建对象的方式。

var person2 = Object.create(person1);
/*
person2.name
person2.greeting()
*/

Object prototypes

更精确的说，属性和方法是定义在对象构造器函数中的，而不是在对象实例自身当中。__proto__ 是连接对象实例和原型蓝本之间的桥梁。__proto__ 派生自构造器的 prototype 属性。

注意：对象的原型(Object.getPrototypeOf(person3) 或者 obj.__proto__) 同构造器函数 prototype 属性之间的区别，前者是各个对象实例的属性，后者是构造器的属性。

person1.valueOf()
/*
valueOf() 继承自 Object
Object 是 Person 的原型类
*/

Object.create()

var person2 = Object.create(person1);
person2.__proto__
/*
返回值是 person1
因为创建 person2 的原型类就是 person1
*/

Constructor property

构造器属性，指向原始的构造器方法。

person1.constructor
person2.constructorvar person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
/*
person3.name.first
person3.age
person3.bio()
*/// 取得构造器名称
instanceName.constructor.name
person1.constructor.name

变更原型蓝本

function Person(first, last, age, gender, interests) {// property and method definitions}var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);// 向原型中加入新方法
Person.prototype.farewell = function() {alert(this.name.first + ' has left the building. Bye for now!');
};

Inheritance 继承

Prototype inheritance

function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;
};Person.prototype.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');
};// 声明子类
function Teacher(first, last, age, gender, interests, subject) {Person.call(this, first, last, age, gender, interests);this.subject = subject;
}
/*
结果类似如此
function Teacher(first, last, age, gender, interests, subject) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;this.subject = subject;
}
*/// 无参数构造器继承
function Brick() {this.width = 10;this.height = 20;
}function BlueGlassBrick() {Brick.call(this);this.opacity = 0.5;this.color = 'blue';
}

设定继承类的蓝本和构造器参考

        // Person 對象構造器function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;};// 向 Person 構造器藍本中加入方法Person.prototype.greeting = function () {alert("Hi! I\'m " + this.name.first + ".");};// Teacher 對象構造器，部分屬性繼承自 Personfunction Teacher(first, last, age, gender, interests, subject) {Person.call(this, first, last, age, gender, interests);// this 指該該方法被調用時，調用者自身this.subject = subject; // Teacher 對象擁有的新屬性}

如以上方式的定义，Teacher 原始蓝本属性中没有 greeting，以上的继承方式，只能继承基准构造器蓝本中定义的属性和方法。

Object.getOwnPropertyNames(Teacher.prototype)
// 返回值：["constructor"]Object.getOwnPropertyNames(Person.prototype)
// 返回值：["constructor", "greeting"]

执行此语句加入 Person 中的 greeting 方法

Teacher.prototype = Object.create(Person.prototype);
// 此时 Teacher.prototype.constructor 就为 Person 的构造器
// 使用下方语句，以指定其构造器为 Teacher
Teacher.prototype.constructor = Teacher;

此时，Teacher 蓝本中也包含 greeting 方法了，但是通过 Object.getOwnPropertyNames(Teacher.prototype) 的返回值会变为空白数组，需要使用以下代码修复

        Object.defineProperty(Teacher.prototype, 'constructor', {value: Teacher,enumerable: false, // so that it does not appear in 'for in' loopwritable: true});

定义继承类中的新方法

        // 定義繼承類的新方法Teacher.prototype.greeting = function () {var prefix;if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {prefix = 'Mr.';} else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender ==='F') {prefix = 'Mrs.';} else {prefix = 'Mx.';}alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');};

定义新的继承类 Student

        // Student 對象構造器，全部屬性都繼承自 Personfunction Student(first, last, age, gender, interests) {Person.call(this, first, last, age, gender, interests);}Student.prototype = Object.create(Person.prototype);Student.prototype.constructor = Student;Student.prototype.greeting = function () {alert("Yo! I\'m " + this.name.first + ".");};let student1 = new Student('Liz', 'Sheppard', 17, 'female', ['ninjitsu', 'air cadets']);

ECMAScript 2015 Classes

Internet Explorer 对此支持很欠缺

        class Person {constructor(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;}greeting() {console.log(`Hi! I'm ${this.name.first}`);};farewell() {console.log(`${this.name.first} has left the building. Bye for now!`);};}

使用 class 关键字，定义类；constrcutor() 方法定义构造器；greeting() farewell() 为此类的方法，注意方法定义末尾的分号【;】

使用 new 关键字，创建类，并且调用该类的方法。

        let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);han.greeting();// Hi! I'm Hanlet leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);leia.farewell();// Leia has left the building. Bye for now

定义继承类

        // 基於 Person 的子類 Teacherconsole.log("Subclass Teacher");// class Teacher extends Person {//     constructor(first, last, age, gender, interests, subject, grade) {//         this.name = {//             first,//             last//         };//         this.age = age;//         this.gender = gender;//         this.interests = interests;//         // subject and grade are specific to Teacher//         this.subject = subject;//         this.grade = grade;//     }// }class Teacher extends Person {constructor(first, last, age, gender, interests, subject, grade) {super(first, last, age, gender, interests); // 使用 super 關鍵字，調用父類的構造函數，初始化變量// subject and grade are specific to Teacherthis.subject = subject;this.grade = grade;}}let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);snape.greeting(); // Hi! I'm Severus.snape.farewell(); // Severus has left the building. Bye for now.console.log(snape.age); // 58console.log(snape.subject); // Dark arts

使用 extends 指明子类的父类；在子类构造函数中，使用 super() 方法，调用父类的构造函数，初始化子类继承自父类的属性。

Getters and Setters

        class Teacher extends Person {constructor(first, last, age, gender, interests, subject, grade) {super(first, last, age, gender, interests); // 使用 super 關鍵字，調用父類的構造函數，初始化變量// subject and grade are specific to Teacherthis._subject = subject;this.grade = grade;}get subject() {return this._subject;}set subject(newSubject) {this._subject = newSubject;}}let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);snape.greeting(); // Hi! I'm Severus.snape.farewell(); // Severus has left the building. Bye for now.console.log(snape.age); // 58console.log(snape.subject); // Dark artssnape.subject = "Balloon animals"; // Change the subjectconsole.log(snape.subject); // Balloon animals

在属性名称前使用 _ 来分离属性名称的定义，若没有此符号，那么在每次调用 get set 方法时，都会报错。

JSON - JavaScript Object Notation

JSON 结构

        let superHeroes = {"squadName": "Super hero squad","homeTown": "Metro City","formed": 2016,"secretBase": "Super tower","active": true,"members": [{"name": "Molecule Man","age": 29,"secretIdentity": "Dan Jukes","powers": ["Radiation resistance","Turning tiny","Radiation blast"]},{"name": "Madame Uppercut","age": 39,"secretIdentity": "Jane Wilson","powers": ["Million tonne punch","Damage resistance","Superhuman reflexes"]},{"name": "Eternal Flame","age": 1000000,"secretIdentity": "Unknown","powers": ["Immortality","Heat Immunity","Inferno","Teleportation","Interdimensional travel"]}]}

若在程式中载入，可以如此访问

superHeroes.homeTown // "Metro City"superHeroes["active"] // truesuperHeroes['members'][1]['powers'][2] // "Superhuman reflexes"

数组样式的 JSON 也是格式正确的

[{"name": "Molecule Man","age": 29,"secretIdentity": "Dan Jukes","powers": ["Radiation resistance","Turning tiny","Radiation blast"]},{"name": "Madame Uppercut","age": 39,"secretIdentity": "Jane Wilson","powers": ["Million tonne punch","Damage resistance","Superhuman reflexes"]}
]

JSON 只是一种纯粹的数据格式，只包含属性，其中没有方法。
JSON 中的属性名称、string 类型的属性值，需要用双引号包裹，若用单引号包裹是错误的。

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Our superheroes</title><link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"><link rel="stylesheet" href="./heroes.css">
</head><body><header></header><section></section><script>let header = document.querySelector('header');let section = document.querySelector('section');let requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";let request = new XMLHttpRequest();request.open("GET", requestURL); // 開啟請求request.responseType = "json";request.send();request.onload = function () {let superHeroes = request.response;populateHeader(superHeroes);showHeroes(superHeroes);};function populateHeader(jsonObj) {let myH1 = document.createElement("h1");myH1.textContent = jsonObj["squadName"];header.appendChild(myH1);let myPara = document.createElement("p");myPara.textContent = "Hometown: " + jsonObj["homeTown"];header.appendChild(myPara);}function showHeroes(jsonObj) {let heroes = jsonObj["members"];for (let i = 0; i < heroes.length; i++) {let myArtical = document.createElement("article");let myH2 = document.createElement("h2");let myPara1 = document.createElement("p");let myPara2 = document.createElement("p");let myPara3 = document.createElement("p");let myList = document.createElement("ul");myH2.textContent = heroes[i].name;myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity;myPara2.textContent = "Age: " + heroes[i].age;myPara3.textContent = "Superpower:";let superPowers = heroes[i].powers;for (let j = 0; j < superPowers.length; j++) {let listItem = document.createElement("li");listItem.textContent = superPowers[j];myList.appendChild(listItem);}myArtical.appendChild(myH2);myArtical.appendChild(myPara1);myArtical.appendChild(myPara2);myArtical.appendChild(myPara3);myArtical.appendChild(myList);section.appendChild(myArtical);}}</script>
</body></html>

html {font-family: 'helvetica neue', helvetica, arial, sans-serif;
}body {width: 800px;margin: 0 auto;
}h1,
h2 {font-family: 'Faster One', cursive;
}/* header styles */h1 {font-size: 4rem;text-align: center;
}header p {font-size: 1.3rem;font-weight: bold;text-align: center;
}/* section styles */section article {width: 33%;float: left;
}section p {margin: 5px 0;
}section ul {margin-top: 0;
}h2 {font-size: 2.5rem;letter-spacing: -5px;margin-bottom: 10px;
}

对象和文本之间的转换

request.responseType = 'json';
/*
使用这个设置，使 XHR 请求直接将 JSON 响应，转换为 JavaScript 对象
*/

parse() 使用此方法，将对应的 JSON 文本，转换为对应的 JavaScript 对象。

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();request.onload = function() {var superHeroesText = request.response; // get the string from the responsevar superHeroes = JSON.parse(superHeroesText); // convert it to an objectpopulateHeader(superHeroes);showHeroes(superHeroes);
}

stringify() 使用此方法，将对应的 JavaScript 对象，转换为 JSON 字符串。

var myJSON = { "name": "Chris", "age": "38" };
// myJSON
// {name: "Chris", age: "38"}
var myString = JSON.stringify(myJSON);
// myString
// "{"name":"Chris","age":"38"}"

弹跳球示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Bouncing balls</title><link rel="stylesheet" href="./bounceBall.css">
</head><body><h1>Bouncing Balls</h1><p>Ball count: </p><canvas></canvas><script src="./bounceBall.js"></script>
</body></html>

html,
body {margin: 0;
}html {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;height: 100%;
}body {overflow: hidden;height: inherit;
}h1 {font-size: 2rem;letter-spacing: -1px;position: absolute;margin: 0;top: -4px;right: 5px;color: transparent;text-shadow: 0 0 4px white;
}p {position: absolute;margin: 0;top: 35px;right: 5px;color: #aaa;
}

let para = document.querySelector('p');
let count = 0;// 設置畫布
let canvas = document.querySelector('canvas'); // 取得畫布參考
let ctx = canvas.getContext('2d'); // 獲得可用於繪製的上下文let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;// 生成隨機數
function random(min, max) {let num = Math.floor(Math.random() * (max - min)) + min;return num;
}function Shape(x, y, velX, velY, exists) {this.x = x; // X 坐標this.y = y; // Y 坐標this.velX = velX; // 水平速率this.velY = velY; // 垂直速率this.exists = exists;
}// 圓球構造函數
function Ball(x, y, velX, velY, exists, color, size) {// this.x = x; // X 坐標// this.y = y; // Y 坐標// this.velX = velX; // 水平速率// this.velY = velY; // 垂直速率// this.color = color; // 顏色// this.size = size; // 尺寸，圓球的半徑Shape.call(this, x, y, velX, velY, exists);this.color = color; // 顏色this.size = size; // 尺寸，圓球的半徑
}
Ball.prototype = Object.create(Shape.prototype);
Ball.prototype.constructor = Ball;// 繪製圓球
Ball.prototype.draw = function () {ctx.beginPath(); // 開始向畫布繪製圖形ctx.fillStyle = this.color; // 繪製圖形的顏色// 參數1、2：圖形中心位置坐標；參數3：圖形半徑；參數4、參數5：圖形開始-結束角度ctx.arc(this.x, this.y, this.size, 0, (2 * Math.PI));ctx.fill(); // 填充圓弧圖形
};// 更新圓球位置
Ball.prototype.update = function () {if ((this.x + this.size) >= width) {this.velX = -(this.velX);}if ((this.x - this.size) <= 0) {this.velX = -(this.velX);}if ((this.y + this.size) >= height) {this.velY = -(this.velY);}if ((this.y - this.size) <= 0) {this.velY = -(this.velY);}this.x += this.velX;this.y += this.velY;
};// 圓球碰撞檢測
Ball.prototype.collisionDetect = function () {for (let index = 0; index < balls.length; index++) {if (!(this === balls[index])) {let dx = this.x - (balls[index]).x;let dy = this.y - (balls[index]).y;let distance = Math.sqrt((dx * dx) + (dy * dy));if (distance < (this.size + (balls[index]).size)) {(balls[index]).color = this.color = "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";}}}
};// 吃掉圓球
function EvilCircle(x, y, exists) {Shape.call(this, x, y, 20, 20, exists);this.color = "white";this.size = 10;
}
EvilCircle.prototype = Object.create(Shape.prototype);
EvilCircle.prototype.constructor = EvilCircle;EvilCircle.prototype.draw = function () {ctx.beginPath();ctx.strokeStyle = this.color;ctx.lineWidth = 3;ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);ctx.stroke();
};EvilCircle.prototype.checkBounds = function () {if ((this.x + this.size) >= width) {this.x -= this.size;}if ((this.x - this.size) <= 0) {this.x += this.size;}if ((this.y + this.size) >= height) {this.y -= this.size;}if ((this.y - this.size) <= 0) {this.y += this.size;}
};EvilCircle.prototype.setControls = function () {let _this = this;window.onkeydown = function (e) {if (e.keyCode === 65) { // a_this.x -= _this.velX;} else if (e.keyCode === 68) { // d_this.x += _this.velX;} else if (e.keyCode === 87) { // w_this.y -= _this.velY;} else if (e.keyCode === 83) { // s_this.y += _this.velY;}};
};EvilCircle.prototype.collisionDetect = function () {for (let j = 0; j < balls.length; j++) {if (balls[j].exists) {let dx = this.x - balls[j].x;let dy = this.y - balls[j].y;let distance = Math.sqrt((dx * dx) + (dy * dy));if (distance < this.size + balls[j].size) {balls[j].exists = false;count--;para.textContent = 'Ball count: ' + count;}}}
};let balls = [];let evil = new EvilCircle(random(0, width), random(0, height), true);
evil.setControls();function loop() {// 繪製黑色背景矩形畫布ctx.fillStyle = "rgba(0,0,0,0.25)";ctx.fillRect(0, 0, width, height);while (balls.length < 50) {let size = random(10, 20);let ball = new Ball(// ball position always drawn at least one ball width// away from the edge of the canvas, to avoid drawing errorsrandom(0 + size, width - size),random(0 + size, height - size),random(-7, 7),random(-7, 7),true,'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')',size);balls.push(ball);count++;para.textContent = "Ball count: " + count;}for (let index = 0; index < balls.length; index++) {if ((balls[index]).exists) {(balls[index]).draw();(balls[index]).update();(balls[index]).collisionDetect();}}evil.draw();evil.checkBounds();evil.collisionDetect();requestAnimationFrame(loop);
}loop();

这篇关于JavaScript - Objects的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！