《JS高程第八章 第一部分》

面向对象编程Object

8.1 理解对象

创建对象的通常方式是创建object的一个新实例，然后再给它添加属性和方法

  1.     let person=new Object();
  2.     person.name="JackMa";
  3.     person.age=59;
  4.     person.job="福报厂创始人";
  5.     person.sayHi=function(){
  6.         console.log("对于你们年轻人来说996是福报");
  7.         console.log("我从没得过钱，我对钱不感兴趣。")
  8.     }

8.1.1属性

属性分为 对象属性以及访问器属性

1、数据属性

数据属性包含一个保存数据值的位置，值会从这个位置读取，也会写入到这个位置。数据属性有四个特性描述它们的行为。

1、[[Configurable]]：表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特性都是true

2、[[Enumerable]]：表示属性是否可以通过for-in进行循环，默认情况下，所有直接定义在对象上的属性的这个特性都是true

3、[[Writable]]：表示属性的值是否可以被修改。默认情况下，所有定义在对象上的属性的这个特性都是true

4、[[Value]]：包含属性实际的值。这就是前面提到的那个读取和写入属性值的位置，这个特性默认为undefined

要修改属性的默认特性，就必须使用Object.defineProperty()方法

类方法defineProperty()

defineProperty()会直接在对象上定义一个新属性，或者修改一个对象现有的属性，并返回此对象。

语法：defineProperty(对象,属性,描述);

  1.     let person=new Object();
  2.     Object.defineProperty(person,"tel",{
  3.         Configurable:true,    //表示是否可以通过delete删除并重新定义
  4.         Enumerbable:true,    //表示是否可以通过for-in进行循环
  5.         Writable:true,        //表示属性的值是否可以被修改
  6.         Value:13888888888    //
  7.     })

2、访问器属性

访问器属性不包含数据值，相反，它们包含一个获取(getter)函数和一个设置(setter)函数，不过这两个属性都不是必需的

  1.     Configurable:表示属性是否可以通过delete删除
  2.     Enumerable:表示属性是否可以通过for-in循环返回。
  3.     Get:获取函数，在读取属性时调用，默认为undefined
  4.     Set:设置函数，在写入属性时调用。默认值为undefined

Sample:

  1.     let book={
  2.         name:"JS高程",
  3.         year_:2017,
  4.         edition:1
  5.     }
  6.     Object.defineProperty(book,"year",{
  7.         get(){
  8.             return this.year_;
  9.         },
  10.         set(newValue){
  11.             if(newValue>2017){
  12.                 this.year_=newValue;
  13.                 this.edition+=newValue-2017;
  14.             }
  15.         }
  16.     });
  17.     book.year=2019;
  18.     console.log(book.edition);

8.1.2类方法defineProperties()定义多个属性

  1.     let book={};
  2.     Object.defineProperties(book,{
  3.         year_:{
  4.             value:2017
  5.         },
  6.         edition:{
  7.             value:1
  8.         },
  9.         year:{
  10.             get(){
  11.                 return this.year_;
  12.             },
  13.             set(newValue){
  14.                 if(newValue>2017){
  15.                     this.year_=newValue;
  16.                     this.edition+=newValue-2017;
  17.                 }
  18.             }
  19.         }
  20.     });

上面这段代码在book对象上定义了两个数据属性year_和edition,还有一个访问器属性year

类方法getOwnPropertyDescriptor()

方法返回制定对象上的一个自有属性对应的属性描述符，自有属性指的是直接赋予该对象的属性不需要从原型链上查找的属性

语法Object.getOwnPropertyDescriptor(obj,prop)

  1.     let obj={
  2.         name:"这是一个Object",
  3.         number:110
  4.     }
  5.     const str=Object.getOwnPropertyDecscriptor(obj,"name");
  6.     console.log(str.value);        //这里返回"这是一个Object"
  7.     console.log(str.number);    //这里返回undefined

8.1.4合并对象merge

类方法Object.assign()方法 ES6新增方法

  1.     let target={
  2.         a:123,
  3.         b:456
  4.     }
  5.     let source={
  6.         b:345,
  7.         c:567
  8.     }
  9.     obj=Object.assign(target,source);
  10.     console.log(target);
  11.     //返回对象{
  12.         a:123,b:345,c:567
  13.     }

assign实际上是浅复制，拷贝指针地址，不拷贝数据

类方法Object.is() ES6新增

判断两个对象是否为同一个值

  1.     let num=1;
  2.     console.log(Object.is(num,1));    //返回true
  3.     let tr=true;
  4.     console.log(Object.is(tr,num));    //返回false
  5.     let nu=+0;
  6.     console.log(Object.is(nu,0));    //返回true

TIPS ：在JS中，数组是伪数组，本质上是一个对象。

  1.     let a=[1,2,3];
  2.     //用对象的写法是
  3.     let a={
  4.         "0":1,
  5.         "1":2,
  6.         "2",3,
  7.         length:3
  8.     }
  9.     //a[0]和a["0"]都可以调用，a[0]这里进行了隐式转换了
  10.     console.log(a[0]);        //返回 1
  11.     console.log(a["0"]);    //返回 1
  12.     console.log(a.length)    //返回 3
  14.     for(let i=0;i<a.lenght;i++){
  15.         console.log(a[i]);    //返回 1 2 3 
  16.     }

8.1.6 增强对象语法（语法糖）

1、属性值简写

  1.     let person={
  2.         name:"JackMa"
  3.     }
  4.     //
  5.     let name="JackMa"
  6.     let person1={
  7.         name
  8.     }

2、可计算属性

/这里本质上就是数组赋值对象属性/

  1.     const nameKey="name";
  2.     const ageKey="age";
  3.     const jobKey="job";
  4.     let person={};
  5.     person[nameKey]="JackMa";
  6.     person[ageKey]=58;
  7.     person[jobKey]="福报厂创始人";
  9.     console.log(person);
  10.     /*    这里返回的是 {
  11.         name:"JackMa",
  12.         age:58,
  13.         job:"福报厂创始人"
  14.     }
  15.     */

记住：在JS中数组本质上是对象

C语言中，指针本质上是数组

3、简写方法名

Tip1

  1.     let person={
  2.         sayHello:function(name){
  3.             console.log(`Hello,${name}`);
  4.         }
  5.     };
  6.     person.sayHello('JackMa');        //返回 Hello,JackMa

Tip2

  1.     let person={
  2.         sayHello(name){
  3.             console.log(`Hello,${name}`);
  4.         }
  5.     }
  6.     person.sayHello('JackMa');        //返回 Hello,JackMa

Tip1和Tip2两个都一样的

8.1.7 对象解构 ES6新增

对象解构语法，可以在一条语句中使用嵌套数据实现一个或多个赋值操作。

简单地说，对象解构就是使用与对象匹配的结构来实现对象属性赋值

Sample 不使用对象解构

  1.     let person={
  2.         name:"JackMa",
  3.         age:58
  4.     };
  5.     let personName=person.name,
  6.         personAge=person.age;
  7.     console.log(personName);
  8.     console.log(personAge);

Sample 使用对象解构

  1.     let person={
  2.         name:'JackMa',
  3.         age:58
  4.     };
  5.     let {name:personName,age:personAge}=person;
  6.     console.log(personName);    //JackMa
  7.     console.log(personAge);        //58

1、嵌套解构

解构对于引用嵌套的属性或赋值目标没有限制。为此，可以通过解构复制对象属性

  1.     let person={
  2.         name:"JackMa",
  3.         age:58,
  4.         job:{
  5.             title:"福报厂创始人"
  6.         }
  7.     };
  8.     let personCopy={};
  9.     ({name:personCopy.name,age:personCopy.age,job:personCopy.job}=person)
  11.     console.log(person);
  12.     //返回{name:'JackMa',age:58,job:{title:'福报厂创始人'}}
  13.     console.log(personCopy);
  14.     //返回{name:'JackMa',age:58,job:{title:'福报厂创始人'}}
  16.     //下面利用嵌套解构来匹配嵌套属性
  17.     let {job:{title}}=person;
  18.     console.log(title);    //返回    ‘福报厂创始人’

2、部分解构

如果解构存在错误，则只返回一部分

  1.     let person={
  2.         name:'JackMa',
  3.         age:27
  4.     };
  5.     let personName,personBar,personAge;
  6.     try{
  7.         //person.foo是undefined所以会抛出错误
  8.         ({name:personName,foo:{bar:personBar},age:personAge}=person);
  9.     }catch(e){
  10.         console.log('error');
  11.     }
  12.     console.log(personName,personBar,personAge);
  13.     //返回 JackMa,undefined,undefined

因为前面的personBar解构失败，所以后面的personAge也是undefined

3、函数参数上下文匹配

说成白话就是解构函数的参数arguments

  1.     let person={
  2.         name:'JackMa',
  3.         age:27
  4.     };
  5.     function printPerson(foo,{name,age},bar){
  6.         console.log(arguments);
  7.         console.log(name,age);
  8.     }
  10.     function printPerson2(foo,{name:personName,age:personAge},bar){
  11.         console.log(arguments);
  12.         console.log(personName,personAge);
  13.     }
  14.     printPerson('fst',person,'snd');
  15.     //返回 ‘JackMa’ 27
  16.     printPerson2('fst',person,'snd');
  17.     //返回 ‘JackMa’ 27

《JS高程第八章 第二部分》

继承

继承是面向对象oop编程中讨论最多的。许多oop语言都支持两种继承方式，接口继承和实现继承。

8.3.1原型链（重点）

Capter8（面向对象、继承） - 图1

Capter8（面向对象、继承） - 图2

JS高程的解释

每一个构造函数（star构造函数）都有一个原型对象（star原型对象），原型有一个函数（constructor）指回构造函数，而实例有一个内部指针指向原型（实例.proto）。如果原型是另一个类型的实例，那就意味着这个原型有一个内部指针（原型.proto）指向另一个原型，相应的另一个原型也有一个指针(原型.constructor)指向另一个构造函数。这样就在实例和原型之间构造了一条原型链

个人更推荐MDN文档的解释

在谈到继承的时候，JavaScript只有一种结构，那就是对象。每一个对象的实例都有一个私有属性(proto)指向它的构造函数的原型(prototype).该原型对象也有一个自己的原型对象(proto),层层向上直到一个对象的原型对象为null。根据定义，null没有原型，并作为原型链的中最后一个环节。换言之proto指到null就没了（这不就是链表吗？proto作为指向下一个节点的指针，然后每个节点（prototype）有一个constructor函数指向构造函数，和一个指向下一个节点的proto，同时构造函数constructor通过prototype指回节点）

MDN解释用代码解释

  1.     let person=function(name,age){
  2.         this.name=name;
  3.         person.age=age;
  4.     }
  5.     let jackMa=new person("JackMa",55);
  6.     if(jackMa._proto_===person.prototype){
  7.         console.log("True,jackMa._proto_ === person.prototype");
  8.     }else{
  9.         console.log("False,jack._proto_!==person.prototype");
  10.     }
  11.     /*重点：你会神奇的发现最后返回了true，*/
  13.     //大致的结构
  14.     //1、只有函数有prototype,实例没有
  15.     jack{
  16.         a:1,
  17.         _proto_:person.prototype{
  18.             b:2,
  19.             _proto_:Object.prototype{
  20.                 c:3,
  21.                 _proto_:null;
  22.             }
  23.         }
  24.     }
  25.     console.log(jack.c);//返回3
  26.     //找jack中的c找不到就会往person.prototype中找，再找不到往Object.prototype中找,这就是原型链继承

梳理一下

1、首先 jackMa.proto ===> person.prototype|person.prototype.proto ===>Object.prototype |Object.prototype._proto ==> null

2、prototype节点会自己玩自己，也就是person.prototype.constrctor==>person,person.prototype==>person.prototype

3、Function和Object两个人互玩，见图二

2、原型与继承

原型与实例的关系可以通过两种方式来确定。第一种方式是使用instanceof操作符，如果一个实例的原型链中出现过相应的构造函数，则instancof返回true,否则返回false

MDN 1、继承属性

  1.     let f=function(){
  2.         this.a=1;
  3.         this.b=2;
  4.     }
  5.     let o=new f();
  6.     f.prototype.b=3;
  7.     f.prototype.c=4;
  8.     /*不要直接上面这样定义属性，会打破原型链*/
  10.     console.log(f);        //返回 {b:3,c:4}
  11.     console.log(o);        //返回 f.prototype {a:1,b:2}
  12.     console.log(o._proto_);    //返回 {b:3,c:4}
  13.     console.log(o._proto_._proto_);//返回 Object.prototype
  14.     console.log(o._proto_.proto_._proto_);    //返回null
  16.     console.log(f.b);    //返回undefined
  17.     console.log(f.c);    //返回4

MDN 2、继承方法

在JavaScript中，并没有其他语言那样的方法，任何函数都可以添加到对象上作为对象的属性。函数的继承与其他属性的继承没有差别，包括“属性遮蔽”相当于方法重写

  1.     let o={
  2.         a:2,
  3.         m(){
  4.             return this.a+1;
  5.         }
  6.     };
  7.     console.log(o.m());    //返回3
  8.     let p=Object.create(o);    //ES6之前的写法
  9.     let p1=new o();            //ES6的写法
  10.     p.a=4;
  11.     console.log(p.m());    //返回5

MDN 3、在Javascript中使用原型

  1.     function doSth(){}
  2.     console.log(doSth.prototype);    //这里返回对象{constructor:f},constructor构造函数指向的是f doSth()
  3.     //和声明函数的方式无关
  4.     //JavaScript中的函数永远有一个默认原型属性
  5.     var doSth=function(){};    
  6.     console.log(doSth);        //这里返回对象{constructor:f},constuctor指向的是f()
  8.     //

MDN 4、给原型对象添加属性

  1.     function doSomthing(){}
  2.     doSomthing.prototype.foo="bar";
  3.     doSomthing.prototype.tel=110;
  4.     console.log(doSomthing.prototype);    //这里返回对象doSth里面有两个属性    1、foo和2、tel

MDN 5、通过new来创建实例

  1.     function doSth(){
  3.     }
  4.     doSth.prototype.thing="加班";
  5.     let doSthInstacne=new doSth();
  6.     doSthInstance.prototype.name="JackMa";
  7.     console.log(doSthInstance);//这里返回对象
  8.     /*
  9.         doSth{
  10.             name:"JackMa",
  11.             _proto_:{
  12.                 thing:"加班"
  13.                 constructor:f doSth(){}
  14.                 _proto_:Object
  15.             }
  16.         }
  17.     */

类Class

8.4.1 类定义，类实际上是语法糖

  1.     //类声明
  2.     class person{}
  3.     //类表达式
  4.     let person=class{};

MDN: class 定义创建一个基于原型继承的具有给定名称新类

  1.     class Polygon{
  2.         constructor(height,width){
  3.             this.area=height*width;    //这个area 实际上是属性
  4.             this.calcArea=function(){
  5.                 return height*width;
  6.             }
  7.         }
  8.     }
  9.     let p=new Ploygon(100,100);
  10.     console.log(p.area);        //这里返回10000
  11.     console.log(p.calcArea());    //这里返回10000

1、把类当做特殊函数

  1.     class Person{};
  2.     console.log(typeof(Person));    //返回Function
  3.     console.log(Person._proto_===Function.prototype);    //返回true
  4.     console.log(Person._proto_.constructor===Function);    //返回true

记得上节原型链中的第二张图的Fuction吗，自己玩自己，比Object还会玩，而这个Person类实际上就是图中animal

还有更会玩的

  1.     class person{};
  2.     let p=new person();
  3.     console.log(p instanceof person);    //返回 true
  4.     console.log(person instanceof Function) //    返回true
  5.     console.log(person instanceof Object); //返回true
  6.     /****function和obje互玩/
  7.     console.log(Function instanceof Object);//返回true
  8.     console.log(Object instanceof Function); //返回true
  9.     /**同理**/
  10.     console.log(Array instanceof Function);    //返回什么？
  11.     console.log(Array instanceof Object);    //返回什么？

2、类可以进行实例化，函数也可以进行实例化

  1.     let sum=function(a,b){
  2.         return a+b;
  3.     }
  4.     let s1=new sum();
  5.     console.log(s1._proto_.constructor(10,5));    //返回15

类继承。extends,背后原理依然还是原型链

1、extends关键字用于类继承或者类表达式中，创建一个类是另一个类的子类

  1.     class ploygon{
  2.         constructor(width,height){
  3.             this.width=width;
  4.             this.height=height;
  5.             this.name="多边形";
  6.         }
  7.     }
  9.     //square 继承polygon
  10.     class square extends ploygon{
  11.         constructor(length){
  12.             super(length,length);
  13.             this.name="正方形";
  14.         }
  15.         set area(){
  16.             return this.width*this.height;
  17.         }
  18.         get area(value){
  19.             this.area=value
  20.         }
  21.     }
  22.     let s1=new square(5);
  23.     console.log(s1.area);    //返回25

2、抽象基类，阻止实例化

通过new.target来实现

  1.     class Polygon{
  2.         constructor(){
  3.             if(new.target==Polygon){
  4.                 console.log("Ploygon是基类不能被实例化！");
  5.                 throw new Error('Polygon 是基类不能进行实例化');
  6.             }
  7.         }
  8.     }
  9.     let p=new Polygon();//这里抛出异常   Error: polygon 是基类不能进行实例化
  10.     at new Polygon

3、继承内置类型

ES6类为继承内置引用类型提供了顺畅的机制，开发者方便扩展内置类型

  1.     class superArray extends Array{
  2.         shuffle(){
  3.             for(let i=this.length-1;i>0;i--){
  4.                 let j=Math.floor(Math.random()*(i+1));
  5.                 [this[i],this[j]]=[this[j],this[i]];
  6.                 //上面那段代码拆开
  7.                 let tmp=this[i];
  8.                 this[i]=this[j];
  9.                 this[j]=tmp;
  10.             }
  11.         }
  12.     }
  14.     supperArray s1=new superArray();
  15.     console.log(s1 instanceof superArray);    //返回true
  16.     s1.shuffle();
  17.     console.log(s1);    //这里一次返回 [1, 5, 3, 9, 7, 4, 2, 8, 6]
  18.     s1.shuffle();
  19.     console.log(s1);    //这里一次返回[5, 9, 4, 6, 7, 8, 2, 1, 3]