前端 js 基础对象（3）

js 对象定义

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象创建</h1>

<p id="demo1"></p>

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

<script>
// 创建对象：
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.";

</script>

</body>
</html>

js 对象属性

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象属性</h1>

<p>访问对象属性有两种不同的方法：</p>

<p>您可以使用 .property 或 ["property"]。</p>

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

<script>
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 ;
</script>

</body>
</html>

js 对象方法

<!DOCTYPE html>
<html>
<body>

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

<script>
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(); 
</script>

</body>
</html>

js 对象显示

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象</h1>

<p>显示对象属性：</p>
<p id="demo1"></p>

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

<script>
const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo1").innerHTML = person;
document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>

</body>
</html>

js set get 对象访问

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Getter 和 Setter</h1>

<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>

<p>此示例使用 lang 属性设置语言属性的值。</p>
 ========== set ==========
<p id="demo"></p>

 ========== get ==========
<p id="demo1"></p>

<script>
 //========== 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;
</script>

</body>
</html>

js 对象构造器

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象构造器</h1>

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

<p id="demo1"></p>
<script>
// 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(); 
</script>

</body>
</html>

js 可迭代对象

可迭代对象（Iterables）是可以使用 for..of 进行迭代的对象。

从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 可迭代对象</h1>

<p>迭代字符串：</p>

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

<p>遍历数组：</p>

<p id="demo1"></p>

<script>
// 创建字符串
const name = "W3School";

// 列出所有元素
let text = ""
for (const x of name) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;

//=================
// 创建数组
const letters = ["a","b","c"];

// 列出所有元素
let text1 = "";
for (const x of letters) {
  text1 += x + "<br>";
}

document.getElementById("demo1").innerHTML = text1;
</script>
</body>
</html>

自制迭代器

参考JavaScript 可迭代对象 (w3school.com.cn)

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 可迭代对象</h1>

<p>自制的可迭代对象：</p>

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

<script>
// 自制的可迭代对象
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;
</script>
</body>
</html>

js map

Map.size

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Map 对象</h1>
<p>使用 Map.set()：</p>

<p id="demo"></p>
====================
// 创建 Map
<p id="demo1"></p>

==========
删除 size 属性返回 Map 中元素的数量：
<p id="demo2"></p>

<script>
// 创建 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;

</script>

</body>
</html>

js call

call()
方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过
call()
，您能够使用属于另一个对象的方法。

本例调用 person 的 fullName 方法，并用于 person1：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 函数</h1>

<p>此例调用 person 的 fullName 方法，在 person1 上使用它：</p>

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

<script>
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; 
</script>

</body>
</html>

js apply

参考 JavaScript 函数 Apply (w3school.com.cn)

JavaScript apply() 方法
apply()
方法与
call()
方法非常相似

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 函数</h1>

<p>在此示例中，person 的 fulllName 方法在 person1 上<b>应用</b>：</p>

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

<script>
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; 
</script>

</body>
</html>

js 闭包

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 闭包</h1>

<p>使用局部变量计数。</p>

<button type="button" onclick="myFunction()">计数！</button>

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

<script>
var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter;}
})();

function myFunction(){
  document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

js 类继承

参考 JavaScript 类继承 (w3school.com.cn)
super()
方法引用父类。

通过在 constructor 方法中调用
super()
方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Class 继承</h1>

<p>请使用 "extends" 关键字从另一个类继承所有方法。</p>
<p>使用 "super" 方法调用父级的构造函数。</p>

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

<script>
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();
</script>

</body>
</html>

标签： javascript 前端开发语言

本文转载自: https://blog.csdn.net/weixin_68266812/article/details/135324009
版权归原作者 阿金要当大魔王~~ 所有，如有侵权，请联系我们删除。

前端 js 基础对象（3）

js 对象定义

js 对象属性

js 对象方法

js 对象显示

js set get 对象访问

js 对象构造器

js 可迭代对象

自制迭代器

js map

Map.size

js call

js apply

js 闭包

js 类继承

发表评论

“前端 js 基础对象（3）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

前端 js 基础对象 （3）

js 对象定义

js 对象属性

js 对象方法

js 对象显示

js set get 对象访问

js 对象构造器

js 可迭代对象

自制迭代器

js map

Map.size

js call

js apply

js 闭包

js 类继承

发表评论

“前端 js 基础对象 （3）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

前端 js 基础对象（3）

“前端 js 基础对象（3）”的评论: