Js对象模型

最新推荐文章于 2024-03-24 21:39:00 发布
最新推荐文章于 2024-03-24 21:39:00 发布
阅读量459 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44800414/article/details/94876635
版权

JS对象模型

JavaScript是一种基于原型(Prototype)的面向对象语言,而不是基于类的面向对象语言.
C++ Java有类Class和实例instance的概念,类是一类事物的抽象,而实例则是类的实体
Js是基于原型的语言,它只有原型对象的概念,原型对象就是一个模板,新的对象从这个模板构建从而获取最初的属性.任何对象在运行时可以动态的增加属性.而且,任何一个对象都可以作为另一个对象的原型,这样后者就可以共享前者的属性.

定义类
字面式声明方式

var obj = {
    property_1:   value_1   //property_# maybe an identifier...
    property_2:   value_2   // or a number

    "property_n:   value_n" // or a string
}


var obj = {
    x:1
    1:'abc'
    'y':'123'
}

for (let s in obj){
    console.log(s,typeof s)
}

ES6之前–构造器

  1. 定义一个函数(构造器)对象,函数名首字母大写
  2. 使用this定义属性
  3. 使用new和构造器创建一个新对象
//定义类,构造器  
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);
p1 = new Point(4,5);
console.log(p1);

// 继承  
function Point3D(x,y,z){
    Point.cail(this,x,y); //'继承'
    this.z = z;
    console.log('Point 3D');
}
console.log(Point3D);
p2 = new Point3D(10,12,16);
consoe.log(p2);
p2.show()

new 构建一个新的通用对象，new操作符会将新对象的this值传递给Point3D构造器函数，函数为这个对象创建z属性。
从上句话知道，new后得到一个对象，使用这个对象的this来调用构造器，那么如何执行“基类”的构造器方法呢？ 使用Point3D对象的this来执行Point的构造器，所以使用call方法，传入子类的this。 最终，构造完成后，将对象赋给p2。
注意：如果不使用new关键字，就是一次普通的函数调用，this不代表实例。

Es6中的class
从ES6开始,新提供了class关键字,使得创建对象更加简单 清晰
1、类定义使用class关键字 创建的本质上还是函数，是一个特殊的函数
2、一个类只能拥有一个名为constructor的构造器方法，如果没有显示的定义一个构造方法，则会添加一个默认的constuctor方法。
3、继承使用extends关键字
4、一个构造器可以使用super关键字来调用一个父类的构造函数
5、类没有私有属性

//基类定义  
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()


//继承
class Point3D extends Point{
    constructor(x,y,z){
        super(x,y);
        this.z = z;
    }
}

let p2 = new Point3D(20,21,22);
p2.show()

重写方法
子类Point3D的show方法，需要重写

//基类定义  
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()


//继承
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()

子类中直接重写父类的方法即可。
如果需要使用父类的方法，使用super.method()的 方式调用。
使用箭头函数重写上面的方法

//基类定义  
class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
        //this.show = function () {console.log(this,this.x,this.y)}; 
        this.show = () => console.log('Point');
    }
}

let p1 = new Point(10,11)
p1.show()


//继承
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()

从运行结果来看,箭头函数也支持子类的覆盖

//基类定义  
class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
        //this.show = function () {console.log(this,this.x,this.y)}; 
        this.show = () => console.log('Point');
    }
    // show(){
    //     console.log(this,this.x,this.y);
    // }
}

let p1 = new Point(10,11)
p1.show()


//继承
class Point3D extends Point{
    constructor(x,y,z){
        super(x,y);
        this.z = z;
        //this.show = () => console.log('Point3D');
    }
    show(){  //重写
        console.log('Point3D');
    }


}

let p2 = new Point3D(20,21,22);
p2.show()

上例优先使用了父类的属性show

//基类定义  
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()


//继承
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()

优先使用了子类的属性。
总结
父类、子类使用同一种方式类定义属性或者方法，子类覆盖父类。
访问同名属性或方法时，优先使用属性

静态属性
静态属性目前还没有得到很好的支持

静态方法
在方法名前加上static,就是静态方法了.

class Add{
    constructor(x,y){
        this.x = x;
        this.y = y; 
    }
    static print(){
        console.log(this.x);
    }
}

add = new Add(40,50);
console.log(Add);
Add.print();
//add.print(); //实例不能访问直接访问静态方法,和C++ Java一致
add.constructor.print();  //实例可以通过constructor访问静态方法

静态方法中的this是Add类,而不是Add的实例
注意:
静态的概念和Python的静态不同,相当于Python中的类变量

this
虽然Js和 C++ 、Java一样有this，但是Js的表现是不同的。
原因在于， C++ 、Java是静态编译型语言，this是编译期绑定，而Js是动态语言，运行期绑定。

var school = {
    name : 'lz',
    getNameFunc : function () {
        console.log(this.name);
        console.log(this);
        return function (){
            console.log(this === global);
            return this.name;
        };
    }
};

console.log(school.getNameFunc()());

为了分析上面的程序，先学习一些知识：
函数执行时，会开启新的执行上下文环境ExecutionContext。
创建this属性，但是this是什么就要看函数是怎么调用的了。

1、myFunction(1,2,3)，普通函数调用方式，this指向全局对象。全局对象是nodejs的global或者浏览器中的 window。
2、myObject.myFunction(1,2,3)，对象方法的调用方式，this指向包含该方法的对象。
3、call和apply方法调用，要看第一个参数是谁。

分析上例 magedu 和 { name: ‘magedu’, getNameFunc: [Function: getNameFunc] } 很好理解。
第三行打印的true，是 console.log(this == global) 执行的结果，说明当前是global，因为调用这个返回的函数 是直接调用的，这就是个普通函数调用，所以this是全局对象。
第四行undefined，就是因为this是global，没有name属性。
这就是函数调用的时候，调用方式不同，this对应的对象不同，它已经不是C++、Java的指向实例本身了。 this的问题，这是历史遗留问题，新版只能保留且兼容了。

1显示传入


var school = {
    name : 'lz',
    getNameFunc : function () {
        console.log(this.name);
        console.log(this);
        return function (that){
            console.log(this === global);
            return that.name;
        };
    }
};

console.log(school.getNameFunc()(school));

通过主动传入对象,这样就避开了this的问题

2 ES3(ES-262第三版)引入了apply call方法


var school = {
    name : 'lz',
    getNameFunc : function () {
        console.log(this.name);
        console.log(this);
        return function (){
            console.log(this === global); //this是否是global对象
            return this.name;
        };
    }
};

console.log(school.getNameFunc().call(school));

apply、call方法都是函数对象的方法，第一参数都是传入对象引入的。
apply传其他参数需要使用数组
call传其他参数需要使用可变参数收集

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

3 ES5引入bind方法


var school = {
    name : 'lz',
    getNameFunc : function () {
        console.log(this.name);
        console.log(this);
        return function (){
            console.log(this === global);
            return this.name;
        };
    }
};

console.log(school.getNameFunc().bind(school));

只打印了三行，说明哪里有问题，问题出在bind方法用错了。

var school = {
    name : 'lz',
    getNameFunc : function () {
        console.log(this.name);
        console.log(this);
        return function (){
            console.log(this === global);
            return this.name;
        };
    }
};
var func = school.getNameFunc();
console.log(func);

var boundfunc = func.bind(school);
console.log(boundfunc);
console.log(boundfunc())

apply、call方法，参数不同，调用时传入this。
bind方法是为函数先绑定this，调用时直接用。

4 ES6引入支持this的箭头函数
ES6新技术,就不需要兼容this问题.

var school = {
    name : 'lz',    
    getNameFunc : function ()  {
        console.log(this.name);
        console.log(this);
        return () => {
            console.log(this === global); // this是否是global对象            
            return this.name;        
        };    
    } 
};
 
console.log(school.getNameFunc()());

ES6新的定义方式如下

class school{
    constructor(){
        this.name = 'lz'
    }
    getNameFunc()  {
        console.log(this.name);
        console.log(this,typeof this);
        return () => {
            console.log(this === global); // this是否是global对象            
            return this.name;        
        };    
    } 
};
 
console.log(new school().getNameFunc()());

以上解决this问题的方法,bind方法最常用.

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

Mixin模式，混合模式。这是一种不用继承就可以复用的技术。主要还是为了解决多重继承的问题。多继承的继承 路径是个问题。
JS是基于对象的，类和对象都是对象模板。
混合mixin，指的是将一个对象的全部或者部分拷贝到另一个对象上去。其实就是属性了。 可以将多个类或对象混合成一个类或对象。

继承实现

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


//s = new Serialization();  //构造Serialization失败
//p = new Point(4,5);  //构造子类对象时,调用父类构造器执行也会失败

父类构造函数中，要求具有属性是stringify的序列化函数，如果没有则抛出异常。
以下是完整继承的代码

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 `x=${this.x},y=${this.y}`
    }
}

class Point3D extends Point{
    constructor(x,y,z){
        super(x,y);
        this.z = z;
    }
    stringify(){
        return `x=${this.x},y=${this.y} ,z=${this.z}`
    }
}


p = new Point(4,5); 
console.log(p.stringify()) 
p3d = new Point3D(7,8,9); 
console.log(p3d.stringify());

高阶对象实现
将类的继承构建成箭头函数

// 普通的继承
class A extends Object {}; 
console.log(A);

//匿名类
const A1 = class {
    constructor(x){
        this.x = x;
    }
}
console.log(A1)
console.log(new A1(100).x)


const B = class extends Object{
    constructor(){
        super();
        console.log('B constructor');
    } 
}; 
console.log(B); 
b = new B(); 
console.log(b);

// 箭头函数，参数是类，返回值也是类 
// 把上例中的Object看成参数 
const x = (Sup) => {
    return class extends Sup{
        constructor(){
            super();
            console.log('C constructor');
        }
    };
}


const C = Sup => class extends Sup{
    constructor(){
        super();
        console.log('C contructor');
    }
};

//cls = new C(Object); // 不可以new，因为是一个普通函数，它的返回值是一个带constructor的类 
cls = C(A); // 调用它返回一个类，一个带constructor的class 
console.log(cls); 
c = new cls(); 
console.log(c);

//其他写法  
c1 = new (C(Objiect))(); //new优先级太高了，所有后面要加括号才能先调用

可以改造上面序列化的例子了

const Serialization = Sup => class extends Sup{
    constructor(...args){
        console.log('Serialization constructor~~~');
        super(...args)
        if (typeof(this.stringify) !== 'function'){
            throw new ReferenceError('should define stringify.');
        }
    }
}


class Point{
    constructor(x,y){        
        console.log('Point Constructor~~~~');           
        this.x = x;        
        this.y = y;    
    } 
}

class Point3D extends Serialization(Point){
    constructor(x,y,z){
        super(x,y);
        this.z = z;
    }
    stringify(){
        return `x=${this.x},y=${this.y} ,z=${this.z}`
    }
}

p3d = new Point3D(7,8,9); 
console.log(p3d.stringify());

注意： Serialization(Point)这一步实际上是一个匿名箭头函数调用，返回了一个新的类型，Point3D继承自这个新的匿名 类型，增强了功能。
React框架大量使用了这种Mixin技术。

liuzhen087
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript对象模型
兰枫
07-05 839
javascript对象模型 文章目录javascript对象模型定义类1.字面式声明方式(也称为字面值创建对象。)2.ES6之前----构造器构造类3.ES6中的class关键字this的不同作用域高阶对象、高阶类、或称Mixin模式继承实现高阶对象实现 JavaScript是一种基于原型（Prototype）的面向对象语言，而不是基于类的面向对象语言。 C++、Java有类Class和实例In...
JMS对象模型
Hern（宋兆恒）
08-01 544
JMS定义 JMS即Java消息服务（Java Message Service）应用程序接口，是一个Java平台中关于面向消息中间件（MOM）的API，用于在两个应用程序之间，或分布式系统中发送消息，进行异步通信。Java消息服务是一个与具体平台无关的API，绝大多数MOM提供商都对JMS提供支持。 JMS是一种与厂商无关的 API，用来访问收发系统消息，它类似于JSBC(Java Datab...
JavaScript对象的基础知识—介绍、基本操作、属性、属性值、字面量等，关注收藏，持续更新
王春燕的博客
04-21 710
一、对象的介绍 1、JavaScript中数据类型： -String 字符串 -Number 数组 -Boolean 布尔值 -Null 空值 -Undefined 未定义 以上五种类型属于基本数据类型，我们看到的值，只要不是上面的五种，剩下的全都是Object 对象， 基本数据类型都是单一的值“hello” 123 ture，值与值之间没有任何的联系，如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能...
JS中的对象模型——DOM、BOM
qq_62225979的博客
03-06 329
DOM和BOM是Web开发中的两个重要模型 Javascript可以通过DOM定位指定的元素，属性，进而实现查找、修改、创建等操作
JavaScript对象模型概念
weixin_30408675的博客
07-13 130
1.对象的概念 　　JavaScript只有函数对象才有类的概念，因此创建一个对象，必须使用函数对象。（ES6中可以直接声明一个class，实质上也是一个函数对象）。 函数对象的内部有[[Construct]]方法和[[Call]]方法。[[Construct]]用于构造对象，[[Call]]用于函数调用。当使用 new 操作符的时候才会触发[[Construct]] 逻辑。var obj ...
javascript基础十二：JavaScript中的事件模型如何理解?
Allen-Ye博客
05-31 588
JavaScript中的事件模型如何理解?
JavaScript 对象模型 执行模型
10-29
### JavaScript对象模型与执行模型详解 #### 一、引言 JavaScript作为一种动态的、弱类型的脚本语言，在Web开发领域占据着举足轻重的地位。其核心特性之一就是灵活的对象模型，以及基于原型的继承机制。本文将深入...
浅谈javascript对象模型和function对象
10-25
主要简单介绍了javascript对象模型和function对象，以及相关的示例代码，非常实用，需要的小伙伴参考下
JS中的对象模型
gezongbo的博客
03-11 866
JS中的对象模型1、JS中的对象模型1.1 window对象1.2 定时器1.3 document对象1.4 document 对象查询节点1.5 document对象中的增加节点1.6 document中的删除节点1.7 关于Select和Option对象 1、JS中的对象模型 (1)BOM：浏览器对象模型 Browser Object Model,用来访问和操纵浏览器窗口 具体通过window对象来实现浏览器窗口的操纵。 (2)DOM：文档对象模型 Document Object Model,用来操纵
JS对象模型
鑫仔之行
07-10 1138
文章目录JS对象模型定义类字面式声明方式ES6之前---构造器ES6中的class重写方法静态属性静态方法this的注意要点显式传入ES3（ES-262第三版）引入了apply、call方法ES5 引入了bind方法ES6引入支持this的箭头函数 JS对象模型 JavaScript 是一种基于原型（Prototype）的面向对象语言，而不是基于类的面向对象语言 C++、Java有类Class和...
JavaScript设计模式
萌萌哒的瑞萌萌的博客
12-18 830
JavaScript设计模式 设计原则 S O L I D 五大设计原则 S———单一职责原则 O———开放封闭原则 L———李氏置换原则 I———-接口独立原则 D———-依赖导致原则 S———单一职责原则 一个程序只做好一件事 如果功能过于复杂就拆分开，每个部分保持独立 O———开放封闭原则 对扩展开放，对修改封闭 增加需求时，扩展新代码，而非修改已有代码 这是软件设计的终极目标 L———李氏置换原则 子类能覆盖父类 父类能出现的地方，
JavaScript对象模型
X0604_995的博客
06-25 139
一、 BOM对象 BOM对象 (1) BOM对象也称为内置对象（Browser Object Model），是浏览器对象模型。提供了一系列对象用户和浏览器窗口进行交互，这些对象统称为BOM对象。 window对象 (1) window对象表示浏览器窗口。 (2) 获取窗体的宽和高： window.innerHeight：浏览器窗口的内部高度 window.innerWidth：浏览器窗口的内部宽度 或者 document.body.clientHeight document.body.clientW
js 23种设计模型详解附代码详解
一步一个脚印，踏实努力，向着目标前进
06-07 851
媒体模式（Memento Pattern）：在不破坏对象的封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。行为型模式：用于描述对象之间的交互方式，包括观察者模式、命令模式、迭代器模式、模板方法模式、策略模式、职责链模式、状态模式、访问者模式、中介者模式等。观察者模式（Observer Pattern）：定义对象之间的一种一对多的依赖关系，当对象的状态发生改变时，所有依赖于它的对象都得到通知并自动更新。观察者模式是一种当一个对象被修改时，会自动通知它的依赖者的模式。
js的几种设计模式
热门推荐
混世小妲己
01-11 1万+
js的设计模式
JS的设计模式（23种）
最新发布
记录每日学习的知识&技术
03-24 3636
抽象工厂模式提供一个接口用于创建一系列相关或相互依赖的对象，而无需指定具体类。客户端使用此接口选择所需的产品族中的产品对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值