JavaScript函数，闭包，对象，类，原型链

JavaScript函数：

在 JavaScript 中，函数是对象的方法。

var person = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
person.fullName();

 在该实例中，fullname是person对象的一个方法。

函数call方法：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

该例程使用person对象的方法来调用person1对象当中的属性。

call方法可以接受参数：

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

该例程是使用person1对象的属性，并且添加了两个参数来给person对象调用方法fullname

函数apply方法：

call（）与不同之处是：

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

---

JavaScript闭包：

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

add();
add();
add();

// 计数器目前是 3 

这是一个闭包实例。

在该段代码当中，add是我们定义的函数的执行返回值，我们首先不考虑add来看该赋值的函数。

这个函数返回了一个函数并且作用是使计数器加1，访问的是定义的函数当中的变量，这个变量我们此时认为已经私有化

因为将这个私有的变量加一的函数返回给add，所以我们调用addcounter会加一。

这种方式称为JavaScript的闭包。

---

JavaScript对象：

对象是包含变量的变量，以键值对的方式。

JavaScript 对象中的命名值，被称为属性。 

demo：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象当中的函数被称为对象的方法。

JavaScript的对象是易变的，demo：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
 
var x = person;
x.age = 10;     

这里的x变量和person对象是同一个指针（深浅拷贝问题）。

可以使用for in来实现对对象属性的遍历，之后使用object[x]即可实现遍历对象属性的值。

通过简单赋值可以添加新属性

通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组

get,set访问器：

set关键词：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";

get关键词： 

fullName : function() {
    return this.firstName + " " + this.lastName;
  }

get fullName() {
    return this.firstName + " " + this.lastName;
  }

例子 1 以函数形式访问 fullName：person.fullName()。

例子 2 以属性形式访问 fullName：person.fullName。

第二个例子提供了更简洁的语法。

计数器get，set使用实例；

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};

// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Object.defineProperty() 方法是用做对对象属性和方法进行修改的一种手段。

　　Object.defineProperty 需要三个参数（object , propName , descriptor）

　　1 object 对象 => 给谁加
　　2 propName 属性名 => 要加的属性的名字 【类型：String】
　　3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】

通过该方式定义的属性和方法是不可修改的除非在使用方法时定义参数writable:true。

参考文章：Object.defineProperty()详解 - 天天向上吧 - 博客园

对象构造器：

对象构造器是以函数为形式存在的。用大写首字母对构造器函数命名是个好习惯。

demo：

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;};
}

无法通过直接的方式对已经写好的构造器中添加属性方法。利用构造器构造的对象也是。

内建构造器：

var x1 = new Object();    // 一个新的 Object 对象
var x2 = new String();    // 一个新的 String 对象
var x3 = new Number();    // 一个新的 Number 对象
var x4 = new Boolean();   // 一个新的 Boolean 对象
var x5 = new Array();     // 一个新的 Array 对象
var x6 = new RegExp();    // 一个新的 RegExp 对象
var x7 = new Function();  // 一个新的 Function 对象
var x8 = new Date();      // 一个新的 Date 对象

Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。

请使用对象字面量 {} 代替 new Object()。

请使用字符串字面量 "" 代替 new String()。

请使用数值字面量代替 Number()。

请使用布尔字面量代替 new Boolean()。

请使用数组字面量 [] 代替 new Array()。

请使用模式字面量代替 new RexExp()。

请使用函数表达式 () {} 代替 new Function()。

原型对象继承：

Object.prototype 位于原型继承链的顶端，日期对象、数组对象和 Person 对象都继承自 Object.prototype。

所有 JavaScript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

使用prototype属性可以实现对对象构造器，对象添加新属性或方法。（该prototype属性指向的是原型对象）

ECMAScript 5 (2009) 向 JavaScript 添加了许多新的对象方法。

管理对象：

// 以现有对象为原型创建对象
Object.create()

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)

// 访问原型
Object.getPrototypeOf(object)

// 以数组返回可枚举属性
Object.keys(object)

 保护对象：

// 防止向对象添加属性
Object.preventExtensions(object)

// 如果属性可以添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

Object.defineProperty(object, property, {value : value})可以更改属性值（上文有提到）

demo：

const person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
};

// 修改属性
Object.defineProperty(person, "language", {value : "NO"});

 es5允许修改元属性，允许修改set，get：

writable : true      // 属性值可更改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置

writable : false     // 属性值不可更改
enumerable : false   // 属性不可枚举
configurable : false // 属性不可重新配置

// 定义 getter
get: function() { return language }
// 定义 setter
set: function(value) { language = value }

Object.defineProperty(person, "language", {writable:false});

Object.getOwnPropertyNames(person);  // 返回数组的数组

 JavaScript的map对象：

Map 对象存有键值对，其中的键可以是任何数据类型。

Map 对象记得键的原始插入顺序。

Map 对象具有表示映射大小的属性。

new Map()	创建新的 Map 对象。
set()	为 Map 对象中的键设置值。
get()	获取 Map 对象中键的值。
entries()	返回 Map 对象中键/值对的数组。
keys()	返回 Map 对象中键的数组。
values()	返回 Map 对象中值的数组。

// 创建新的 Map
const fruits = new Map([;
  [apples, 500],
  [bananas, 300],
  [oranges, 200]
]);

 其他方法：

方法	描述
clear()	删除 Map 中的所有元素。
delete()	删除由键指定的元素。
has()	如果键存在，则返回 true。
forEach()	为每个键/值对调用回调。

.size返回map中的元素数量。

该map理解为哈希表。。。

JavaScript的set对象：

new Set()	创建新的 Set 对象。
add()	向 Set 添加新元素。
clear()	从 Set 中删除所有元素。
delete()	删除由其值指定的元素。
entries()	返回 Set 对象中值的数组。
has()	如果值存在则返回 true。
forEach()	为每个元素调用回调。
keys()	返回 Set 对象中值的数组。
values()	与 keys() 相同。
size	返回元素计数。

 理解为集合。。。

参考博客：​​​​​​JavaScript面向对象 - 谦行 - 博客园

---

JavaScript的原型链以及继承：

通过原型对象的.constructor访问对象构造器。

demo：

function Person() {}
// 通过原型对象访问构造函数
console.log(Person.prototype.constructor === Person);	// 输出结果：true
// 通过实例对象访问构造函数
var p1 = new Person();
console.log(p1.constructor === Person); // 输出结果：true
————————————————
版权声明：本文为CSDN博主「s_kzn」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_61700036/article/details/121375008

任何类的prototype属性本质上都是个类Object的实例，所以prototype也和其它实例一样也有个__proto__内部属性，指向其类型Object的prototype

Object对象本身也是一个函数对象。反过来，当访问”Object.prototype”对象的”constructor”这个属性的时候，就得到了Obejct函数。

另外，当通过”Object.prototype._proto_”获取Object原型的原型的时候，将会得到”null”，也就是说”Object {}”原型对象就是原型链的终点了。

原型链的继承：

该段代码利用call修改person类的作用域到当前类当中，实现了对属性的继承。

改造一些Male

function Male(name, sex, age){
	Person.call(this, name, sex);
	this.age = age;
}

Male.prototype.printAge = function(){
	console.log(this.age);
};

 方法继承：（不使用直接等于赋值的原因是引用关系，深浅拷贝问题）

Male.prototype = Object.create(Person.prototype);
Male.prototype.printAge = function(){
	console.log(this.age);
};
function inherit(superType, subType){
	var _prototype  = Object.create(superType.prototype);
	_prototype.constructor = subType;
	subType.prototype = _prototype;
}

注意点：在继承后再添加新方法避免被覆盖的问题，修改构建函数的指向防止类型出错，这里定义了一个函数来涵盖这一过程。

继承基本分三步：属性继承，方法做深拷贝继承，修改构造函数。

判断某个属性是自己的还是父类的

hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数

m.hasOwnProperty('name'); // true
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true

参考博客：​​​​​​JavaScript面向对象 - 谦行 - 博客园 

ES5实现继承_m0_61700036的博客-CSDN博客

---

JavaScript类：

es6 2015发布。

关键词class:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

类在创建的时候会调用构造方法。

类不是一个对象，类是对象的模板。

JavaScript中的对象实例化本质上还是基于Function来实现的，Class只是语法糖。

demo:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

该实例Car是一个类，age是一个方法。

其他：对象构造器添加方法可以使用prototype来添加，也可以在定义的时候添加。

extends关键词：

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

该实例的super（）调用了父类的constructor实现了对父类属性和方法的继承。

类的static方法，与所有编程语言一致，在创建类方法前声明即可