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(); // 10
n.next(); // 20
n.next(); // 30

document.getElementById("demo").innerHTML = n.next().value;

js map

Map.size

size 属性返回 Map 中元素的数量：

JavaScript Map 对象
使用 Map.set()：


====================
// 创建 Map


==========
删除 size 属性返回 Map 中元素的数量：



// 创建 Map
const fruits = new Map();

// 设置 Map 的值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
//=========================
// 创建 Map
const fruits1 = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo1").innerHTML = fruits1.get("apples");
//=======================
// 创建 Map
const fruits2 = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits2.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();