js 对象定义
JavaScript 对象创建
=======================new
// 创建对象：var persona = {firstName : "Bill",lastName: "Gates",age : 62,eyeColor: "blue"};// 显示对象中的数据：document.getElementById("demo1").innerHTML =persona.firstName + " 已经 " + persona.age + " 岁了。";//==========================var person = new Object();person.firstName = "Bill";person.lastName = "Gates";person.age = 50;person.eyeColor = "blue"; document.getElementById("demo").innerHTML =person.firstName + " is " + person.age + " years old.";
js 对象属性
JavaScript 对象属性
访问对象属性有两种不同的方法：
您可以使用 .property 或 ["property"]。
//======================var person = {firstname:"Bill",lastname:"Gates",age:62,eyecolor:"blue"};person.nationality = "English";//添加数据delete person.age; //删除 age数据//======================document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";//======================document.getElementById("demo1").innerHTML =" I like" +person.eyecolor+" My name "+ person.lastname ;
js 对象方法
var person = {firstName: "Bill",lastName : "Gates",id : 678,};person.name = function() {return this.firstName + " " + this.lastName;};document.getElementById("demo").innerHTML ="My friend is " + person.name(); 
js 对象显示
JavaScript 对象
显示对象属性：
const person = {name: "Bill",age: 19,city: "Seattle"};document.getElementById("demo1").innerHTML = person;document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
js set get 对象访问
JavaScript Getter 和 Setter
Getter 和 Setter 允许您通过方法获取和设置属性。
此示例使用 lang 属性设置语言属性的值。
========== set ========== ========== get ========== //========== set ==========// Create an object:var person = {firstName: "Bill",lastName : "Gates",language : "en",set lang(value) {this.language = value;}};// 使用 set 设置属性：person.lang = "zh";// 显示对象的数据：document.getElementById("demo").innerHTML = person.language;// ========== get ==========// 创建对象：var person1 = {firstName: "Bill",lastName : "Gates",language : "en",get lang1() {return this.language;}};// 使用 getter 显示来自对象的数据：document.getElementById("demo1").innerHTML = person1.lang1;
js 对象构造器
JavaScript 对象构造器
//====================// Person 对象的构造器函数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;}}// 创建 Person 对象var myFriend = new Person("Bill","Gates",62,"green");// 修改姓氏myFriend.changeName("Jobs");// 显示姓氏document.getElementById("demo").innerHTML ="My friend's last name is " + myFriend.lastName;//====================// Person 对象的构造器函数function Person1(first, last, age, eye) {this.firstName = first;this.lastName = last;this.age = age;this.eyeColor = eye;}// 创建两个 Person 对象var myFriend1 = new Person1("Bill", "Gates", 62, "blue");var myBrother1 = new Person1("Steve", "Jobs", 56, "green");// 向第一个对象添加 name 方法myFriend1.name = function() {return this.firstName + " " + this.lastName;};// 显示全名document.getElementById("demo1").innerHTML ="My friend is " + myFriend1.name(); 
js 可迭代对象
可迭代对象（Iterables）是可以使用 for..of 进行迭代的对象。
从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。
JavaScript 可迭代对象
迭代字符串：
========================遍历数组：
// 创建字符串const name = "W3School";// 列出所有元素let text = ""for (const x of name) {text += x + "
";}document.getElementById("demo").innerHTML = text;//=================// 创建数组const letters = ["a","b","c"];// 列出所有元素let text1 = "";for (const x of letters) {text1 += x + "
";}document.getElementById("demo1").innerHTML = text1;
自制迭代器
参考JavaScript 可迭代对象 (w3school.com.cn)
JavaScript 可迭代对象
自制的可迭代对象：
// 自制的可迭代对象function myNumbers() {let n = 0;return {next: function() {n += 10;return {value:n, done:false};}};}//n.next 是向下执行一共执行了三次 返回状态是true// 三次执行之后 第四次就变成了false // 创建可迭代对象const n = myNumbers();n.next(); // 10n.next(); // 20n.next(); // 30document.getElementById("demo").innerHTML = n.next().value;
js map
Map.size
size 属性返回 Map 中元素的数量：
JavaScript Map 对象
使用 Map.set()：
====================// 创建 Map==========删除 size 属性返回 Map 中元素的数量：// 创建 Mapconst fruits = new Map();// 设置 Map 的值fruits.set("apples", 500);fruits.set("bananas", 300);fruits.set("oranges", 200);document.getElementById("demo").innerHTML = fruits.get("apples");//=========================// 创建 Mapconst fruits1 = new Map([["apples", 500],["bananas", 300],["oranges", 200]]);document.getElementById("demo1").innerHTML = fruits1.get("apples");//=======================// 创建 Mapconst fruits2 = new Map([["apples", 500],["bananas", 300],["oranges", 200]]);// Delete an Elementfruits2.delete("apples");document.getElementById("demo2").innerHTML = fruits2.size;
js call
call()方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。
通过
call()，您能够使用属于另一个对象的方法。本例调用 person 的 fullName 方法，并用于 person1：
JavaScript 函数
此例调用 person 的 fullName 方法，在 person1 上使用它：
var person = {fullName: function(city, country) {return this.firstName + " " + this.lastName + "," + city + "," + country;}}var person1 = {firstName:"Bill",lastName: "Gates"}var person2 = {firstName:"Steve",lastName: "Jobs"}var x = person.fullName.call(person1, "Seatle", "USA"); document.getElementById("demo").innerHTML = x; 
js apply
参考JavaScript 函数 Apply (w3school.com.cn)
JavaScript apply() 方法
apply()方法与call()方法非常相似
JavaScript 函数
在此示例中，person 的 fulllName 方法在 person1 上应用：
var person = {fullName: function(city, country) {return this.firstName + " " + this.lastName + "," + city + "," + country;}}var person1 = {firstName:"Bill",lastName: "Gates"}var x = person.fullName.apply(person1, ["Seatle", "USA"]); document.getElementById("demo").innerHTML = x; 
js 闭包
JavaScript 闭包
使用局部变量计数。
0
var add = (function () {var counter = 0;return function () {counter += 1; return counter;}})();function myFunction(){document.getElementById("demo").innerHTML = add();}
js 类继承
参考JavaScript 类继承 (w3school.com.cn)
super()方法引用父类。通过在 constructor 方法中调用
super()方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。
JavaScript Class 继承
请使用 "extends" 关键字从另一个类继承所有方法。
使用 "super" 方法调用父级的构造函数。
class Car {constructor(brand) {this.carname = brand;}present() {return 'I have a ' + this.carname;}}class Model extends Car {constructor(brand, mod) {super(brand);this.model = mod;}show() {return this.present() + ', it is a ' + this.model;}}let myCar = new Model("Ford", "Mustang");document.getElementById("demo").innerHTML = myCar.show();