JS语法---对象模型

太过爱你忘了你带给我的痛 2023-08-17 17:39 82阅读 0赞

**JS对象模型**

**![1348316-20190810231342545-608444109.png][]**

**定义类**

**字面式声明方式**

**![1348316-20190810231543757-813191218.png][]**

**ES6之前---构造器**

**![1348316-20190810231614815-2118791140.png][]**

//定义类
    function Point(x,y){
        this.x = x;
        this.y = y;
        this.show = () => console.log(this,this.x,this.y);
        console.log('Point~~~~~~');
    }
    // console.log(Point)　　//[Function: Point]
    // p1 = Point(4,5)
    // console.log(p1)　　　　//undefined
    p1 =new Point(4,5)              //Point~~~~~~
    console.log(111,p1)             //Point { x: 4, y: 5, show: [Function] }
    //继承
    function Point3D(x,y,z){
        Point.call(this,x,y);
        this.z = z;
        console.log('Point3D~~');
    }   
    console.log(222,Point3D);       //[Function: Point3D]
    p2 = new Point3D(14,15,16);     //Point~~~~~~   Point3D~~
    console.log(333,p2);            //Point3D { x: 14, y: 15, show: [Function], z: 16 }
    p2.show();                      //Point3D { x: 14, y: 15, show: [Function], z: 16 } 14 15

![1348316-20190810232829445-1598154827.png][]

**ES6中的class**

![1348316-20190810233624694-1959712711.png][]

//基类定义
    class Point{
        constructor(x,y){
         /*构造器*/
            this.x = x;
            this.y = y;
        }
        show(){
         /*方法 */
            console.log(this,this.x,this.y);
        }
    }
    
    let p1 = new Point(10,11)
    p1.show()   //Point { x: 10, y: 11 } 10 11
    
    //继承
    class Point3D extends Point{
        constructor(x,y,z){
            super(x,y)
            this.z = z
        }
    }
    let p2 = new Point3D(20,21,22) 
    p2.show()   //Point3D { x: 20, y: 21, z: 22 } 20 21

**重写方法**

//基类定义
    class Point{
        constructor(x,y){
         /*构造器*/
            this.x = x;
            this.y = y;
        }
        show(){
         /*方法 */
            console.log(this,this.x,this.y);
        }
    }
    
    let p1 = new Point(10,11)
    p1.show()   //Point { x: 10, y: 11 } 10 11
    
    //继承
    class Point3D extends Point{
        constructor(x,y,z){
            super(x,y)
            this.z = z
        }
        show(){
         /*方法 */
            console.log(this,this.x,this.y,this.z);
        }
    }
    let p2 = new Point3D(20,21,22)  
    p2.show()   //Point3D { x: 20, y: 21, z: 22 } 20 21 22

![1348316-20190810235157889-1345259437.png][]

//基类定义
    class Point{
        constructor(x,y){
         /*构造器*/
            this.x = x;
            this.y = y;
            this.show = () => console.log('Point');
            // this.show = function (){console.log(this,this.x,this.y)};
        }
    }
    
    //继承
    class Point3D extends Point{
        constructor(x,y,z){
            super(x,y)
            this.z = z
            this.show = () => {console.log('Point3D')}
        }
    }
    let p2 = new Point3D(20,21,22)  
    p2.show() //Point3D

![1348316-20190812221708149-1061164161.png][]

class Point{
        constructor(x,y){
            this.x = x;
            this.y = y;
            this.show = () => console.log('Point');
        }
        // show (){/*方法*/
        //      console.log(this,this.x,this.y);
        // }
    }
    //继承
    class Point3D extends Point{
        constructor(x,y,z){
            super(x,y);
            this.z = z;
        }
        show (){
         //重写
            console.log('Point3D');
        }
    }
    let p2 = new Point3D(20,21,22);
    p2.show()    //Point

![1348316-20190812222359181-1500702556.png][]

class Point{
        constructor(x,y){
            this.x = x;
            this.y = y;
            // this.show = () => console.log('Point');
        }
        // show (){/*方法*/
        //     console.log(this,this.x,this.y);
        // }
    }
    
    let p1 = new Point(10,11)
    p1.show()
    console.log('~~~~~~~~~~~~~~~~')
    //继承
    class Point3D extends Point{
        constructor(x,y,z){
            super(x,y);
            this.z = z;
            this.show = () => console.log('Point3D');
        }
    
    }
    let p2 = new Point3D(20,21,22);
    p2.show()    //Point3D

![1348316-20190812223551184-1904216489.png][]

**静态属性**

![1348316-20190814151605263-416754237.png][]

class Add{
        constructor(x,y){
            this.x = x;
            this.y = y;
        }
        static print(){
            console.log(this.x)// this是Add，而不是Add的实例
        }
    }
    add  = new Add(40,50);
    console.log(Add);   //  [Function: Add]
    Add.print();        //undefined
    // add.print();        //实例不能直接访问静态方法，和C++、Java一致
    add.constructor.print() //undefined     实例可以通过constructor访问静态方法

![1348316-20190814152437634-672687699.png][]

**this的坑**

![1348316-20190814152501116-1669906470.png][]

![1348316-20190814152955290-147438840.png][]

![1348316-20190814153036215-1910888422.png][]

**分析上例**

![1348316-20190814153218243-1479322229.png][]

//1.显示传入
    // console.log(1,school.getNameFunc()(school))
    // return function(that){
         
        // console.log(this === global);//this是否是global对象
        // return that.name
    // }

![1348316-20190814153632154-486315892.png][]

//2.引入apply、call方法
    // console.log(school.getNameFunc().call(school));
    // console.log(school.getNameFunc().apply(school));

![1348316-20190814153957953-1064908775.png][]

function Print(){
        this.print = function(x,y){console.log(x+y)};
    }
    p = new Print(1,2)
    console.log(p)              //object
    console.log(typeof p)       //Print { print: [Function] }
    p.print(10,20)              //30
    p.print.call(p,10,20)       //30
    p.print.apply(p,[10,20])    //30

//3.ES5引入了bind方法(bind方法来设置函数的this值)
    // console.log(school.getNameFunc().bind(school))  //[Function: bound ]
    var func = school.getNameFunc().bind(school)    //bind绑定返回新的函数
    console.log(func)
    console.log(func())

![1348316-20190814154859821-1027052103.png][]

//4.ES6引入支持this的箭头函数
    // console.log(school.getNameFunc()())
    // return () =>{
         
        // console.log(this === global);//this是否是global对象
        // return this.name
    // }

![1348316-20190814155123099-1964204883.png][]

**高阶对象、高阶类、或称Mixin模式**

![1348316-20190814155211675-279036285.png][]

![1348316-20190814155227297-1687381878.png][]

**继承实现**

![1348316-20190814155259317-255197895.png][]

![1348316-20190814160015003-409455075.png][]

class Serialization{
        constructor(){
            console.log('Serialization constructor~~~');
            if (typeof(this.stringify) !== 'function'){
                throw new ReferenceError('should define stringify')
            }
        }
    }
    
    class Point extends Serialization{
        constructor(x,y){
            console.log('Point constructor~~~');
            super();//调用父类构造器
            this.x = x;
            this.y = y;
        }
        stringify(){
            return `<Ponintx=${
        this.x},y=${
        this.y}>`
        }
    }
    
    class Point3D extends Point{
        constructor(x,y,z){
            console.log('Point3D constructor~~~');
            super(x,y);
            this.z = z;
        }
        stringify(){
            return `<Ponintx=${
        this.x},y=${
        this.y},z=${
        this.z}>`
        }
    }
    
    p = new Point(4,5);    
    console.log(p.stringify())
    
    p3d = new Point3D(1,2,3)
    console.log(p3d.stringify())
    /*运行结果：
    Point constructor~~~
    Serialization constructor~~~
    <Ponintx=4,y=5>
    Point3D constructor~~~
    Point constructor~~~
    Serialization constructor~~~
    <Ponintx=1,y=2,z=3>
    */

**高阶对象实现**

![1348316-20190814162627051-935343534.png][]

//高级对象实现
    class A extends Object{};
    console.log(A); //[Function: A]
    
    //匿名类
    const A1 = class{
        constructor(x){
            this.x = x;
        }
    }
    console.log(A1)//[Function: A1]
    console.log(new A1(100).x)//100
    
    //匿名继承
    const B = class extends Object{
        constructor(){
            super();
            console.log('B constructor');
        }
    }
    console.log(B); //[Function: B]
    b = new B();    //B constructor
    console.log(b); //B {}
    
    //箭头函数，参数是类，返回值也是类
    //把上例中的Object看成参数
    const x = (Sup) => {
        return class extends Sup{
            constructor(){
                super();
                console.log('x constructor')
            }
        }
    }
    //演化成下面的形式
    const C = Sup => {
        return class extends Sup{
            constructor(){
                super();
                console.log(`C constructor`)
            }
        }
    }
    
    // cls = new C(Object);    //  不可以new，因为是一个普通函数，它的返回值时一个带constructor的类
    cls = C(A);
    console.log(cls);   //[Function: A]
    c = new cls() ;     //C constructor
    console.log(c);     //A {}
    //其他写法
    c1 = new (C(Object))();//new优先级太高了，所以后面需要加括号才能先调用；
    console.log(c1);     //{}

![1348316-20190814164712772-338458822.png][]

![1348316-20190814165821229-57213879.png][]

转载于:https://www.cnblogs.com/xiaoshayu520ly/p/11333581.html

[1348316-20190810231342545-608444109.png]: /images/20230808/4df556d33d6a411f84046d92527c53ae.png
[1348316-20190810231543757-813191218.png]: /images/20230808/99e8e2128dcd43f6859a3d288b8a8b7a.png
[1348316-20190810231614815-2118791140.png]: /images/20230808/78c0768e3ae440c98ec42db68c7cea5a.png
[1348316-20190810232829445-1598154827.png]: /images/20230808/e5872e17bf7644229cb19c5da758c607.png
[1348316-20190810233624694-1959712711.png]: /images/20230808/21d934814b49404e8fbe36ec1937ee3a.png
[1348316-20190810235157889-1345259437.png]: /images/20230808/213febf9b30442acb406e2195be4402b.png
[1348316-20190812221708149-1061164161.png]: /images/20230808/b807209dbe4b4b5da706b02e8105f675.png
[1348316-20190812222359181-1500702556.png]: /images/20230808/f46eae1978154723a42b6ab4235b1749.png
[1348316-20190812223551184-1904216489.png]: /images/20230808/5bfd7437a2b14d0d8fb97067740289dd.png
[1348316-20190814151605263-416754237.png]: /images/20230808/da859ab762f54fe1a4c2fa68a1b32a19.png
[1348316-20190814152437634-672687699.png]: /images/20230808/04e8f11e5bd3412e825854dc36d79a09.png
[1348316-20190814152501116-1669906470.png]: /images/20230808/034b6c9786ed4e4bb434802d4b5ed04f.png
[1348316-20190814152955290-147438840.png]: /images/20230808/38838e25b91d41efb4a6f197ca47ee75.png
[1348316-20190814153036215-1910888422.png]: /images/20230808/2708fbf9260641d690171dd190ba46d9.png
[1348316-20190814153218243-1479322229.png]: /images/20230808/d10b3f609d954242a49a2cab7a04f133.png
[1348316-20190814153632154-486315892.png]: /images/20230808/42cd5fc1d26a4711b2c3e9a8eef21c79.png
[1348316-20190814153957953-1064908775.png]: /images/20230808/6eb507c867594f1091dcfd84b50bc36b.png
[1348316-20190814154859821-1027052103.png]: /images/20230808/1406ffecdeae46f1a94f87fd83453f0f.png
[1348316-20190814155123099-1964204883.png]: /images/20230808/40ce823b90a24d3aaf797eceb5a5c817.png
[1348316-20190814155211675-279036285.png]: /images/20230808/1082c5f5a241465484345b9773ea589f.png
[1348316-20190814155227297-1687381878.png]: /images/20230808/e9e6a8cb8b7e4d07b295c7037a7a51e3.png
[1348316-20190814155259317-255197895.png]: /images/20230808/4e4351d0e5134c53b63554c325319b84.png
[1348316-20190814160015003-409455075.png]: /images/20230808/ded1313b4bf74bf4a87ac5f955248c53.png
[1348316-20190814162627051-935343534.png]: /images/20230808/51ee6cd87fd143c094bd9e6dfed73af0.png
[1348316-20190814164712772-338458822.png]: /images/20230808/eb4d7c73d9ed4cb1a2f863c129a1621f.png
[1348316-20190814165821229-57213879.png]: /images/20230808/7ad763ecc3ce4126a619101626f4ca87.png