JS对象模型

最新推荐文章于 2024-03-01 16:06:02 发布
最新推荐文章于 2024-03-01 16:06:02 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： js 文章标签： js 对象模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44800244/article/details/95312527
版权

在这里插入图片描述

文章目录

JS对象模型

JavaScript 是一种基于原型（Prototype）的面向对象语言，而不是基于类的面向对象语言

C++、Java有类Class和实例Instance的概念，类是一类事物的抽象，而实例则是类的实体

JS是基于原型的语言，它只有原型对象的概念。原型对象就是一个模板，新的对象从这个模板构建从而获取最初的属性。任何对象在运行时可以动态的增加属性。而且，任何一个对象都可以作为另一个对象的原型，这样后者就可以共享前者的属性

定义类

字面式声明方式

var obj = {
    property_1: value_1, // property_# may be 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));

这种方法也称作字面值创建对象
Js 1.2开始支持

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);
console.log('----------------');
// 继承
function Point3D(x,y,z) {
    Point.call(this,x,y); // "继承"
    this.z = z;
    console.log('Point3D~~~~~~~~');
}

console.log(Point3D);
p2 = new Point3D(14,15,16);
console.log(p2);
p2.show();
运行结果:
Info: Start process (下午8:31:59)
[Function: Point]
Point~~~~~~~~
Point { x: 4, y: 5, show: [Function] }
----------------
[Function: Point3D]
Point~~~~~~~~
Point3D~~~~~~~~
Point3D { x: 14, y: 15, show: [Function], z: 16 }
Point3D { x: 14, y: 15, show: [Function], z: 16 } 14 15
Info: End process (下午8:31:59)

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()
运行结果:
Info: Start process (下午8:38:01)
Point { x: 10, y: 11 } 10 11
Point3D { x: 20, y: 21, z: 22 } 20 21
Info: End process (下午8:38:01)
重写方法

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

// 基类定义
class Point {
    constructor(x,y) /*构造器*/ {
        this.x = x;
        this.y = y;
        //this.show = function() {console.log(this,this.x)};
    }
    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();
运行结果:
Info: Start process (下午8:42:59)
Point { x: 10, y: 11 } 10 11
Point3D { x: 20, y: 21, z: 22 } 20 21 22
Info: End process (下午8:42:59)

子类中直接重写父类的方法即可
如果需要使用父类的方法，使用super.method()的 方式调用

const person = {
    age:'20多了',
    name(){
        return this.age;
    }
}

const man = {
    age:'18岁了',
    sayName(){
        return super.name();
    }  
}

Object.setPrototypeOf( man, person );

let n = man.sayName();

console.log( n )	//18岁了
运行结果:
Info: Start process (上午10:06:35)
18岁了
Info: End process (上午10:06:35)

箭头函数也支持子类的覆盖
总结:父类, 子类使用同一种方式类定义属性或者方法，子类覆盖父类。访问同名属性或方法时，优先使用属性(同子异属)

静态属性

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

静态方法

虽然Js和 C++ 、Java一样有this，但是Js的表现是不同的

原因在于， C++ 、Java是静态编译型语言，this是编译期绑定，而Js是动态语言，运行期绑定

class Add {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static print(){
        console.log(this.x); // ? this是什么
    }
}

add = new Add(40, 50);
console.log(Add);
Add.print();
//add.print(); // 实例不能访问直接访问静态方法，和C++、Java一致
add.constructor.print(); // 实例可以通过constructor访问静态方法
运行结果:
Info: Start process (下午9:03:09)
[Function: Add]
undefined //console.log()没有返回结果
undefined
Info: End process (下午9:03:09)

静态方法中的this是Add类，而不是Add的实例

注意：
静态的概念和Python的静态不同，相当于Python中的类变量

this的注意要点

虽然Js和 C++ 、Java一样有this，但是Js的表现是不同的

原因在于， C++ 、Java是静态编译型语言，this是编译期绑定，而Js是动态语言，运行期绑定

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

console.log(school.getNameFunc()());
/* 运行结果
name{ name: 'name', getNameFunc: [Function: getNameFunc] }
true
undefined*/

为了分析上面的程序，先学习一些知识：
函数执行时，会开启新的执行上下文环境ExecutionContext

创建this属性，但是this是什么就要看函数是怎么调用的了

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

分析上例
name 和 { name: ‘name’, getNameFunc: [Function: getNameFunc] } 很好理解

第三行打印的true，是 console.log(this == global) 执行的结果，说明当前是global，因为调用这个返回的函数
是直接调用的，这就是个普通函数调用，所以this是全局对象

第四行undefined，就是因为this是global，没有name属性

这就是函数调用的时候，调用方式不同，this对应的对象不同，它已经不是C++、Java的指向实例本身了, this的问题，这是历史遗留问题，新版只能保留且兼容了

而我们在使用时，有时候需要明确的让this必须是我们期望的对象，如何解决这个问题呢？

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

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

/* 运行结果
name
{ name: 'name', getNameFunc: [Function: getNameFunc] }
false
name
*/

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

ES3（ES-262第三版）引入了apply、call方法
var school = {
    name : 'name',
    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)); // call方法显式传入this对应的对象

/* 运行结果
name
{ name: 'name', getNameFunc: [Function: getNameFunc] }
false
name
*/

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]);
运行结果:
Info: Start process (上午9:42:22)
30
30
30
Info: End process (上午9:42:22)
ES5 引入了bind方法

bind方法来设置函数的this值

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

console.log(school.getNameFunc().bind(school)); // bind方法绑定

/* 运行结果
name
{ name: 'name', getNameFunc: [Function: getNameFunc] }
[Function: bound ]
*/

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

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

var func = school.getNameFunc();
console.log(func);

var boundfunc = func.bind(school); // bind绑定后返回新的函数
console.log(boundfunc);
console.log(boundfunc());

/* 运行结果
name
{ name: 'name', getNameFunc: [Function: getNameFunc] }
[Function]
[Function: bound ]
false
name
*/

apply、call方法，参数不同，调用时传入this

bind方法是为函数先绑定this，调用时直接用

ES6引入支持this的箭头函数

ES6 新技术，就不需要兼容this问题

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

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

/* 运行结果
name
{ name: 'name', getNameFunc: [Function: getNameFunc] }
false
name
*/

ES6 新的定义方式如下

class school{
    constructor(){
        this.name = 'name';
    }

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

/* 运行结果
name
school { name: 'name' } 'object'
false
name
*/

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

鑫～仔
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES规范-ECMA-262_6th_edition_june_2015.zip
01-06
ES2015规范
JavaScript 对象模型 执行模型
10-28
简单数值类型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文单词在这里仅指数据类型的名称，并不特指JS的全局对象N an, Boolean, Number, String等，它们在概念上的区别是比较大的。
JavaScript教程9 - Node.js
Flyingfish
06-05 429
Node.js
对象模型（Object Model）
最新发布
weixin_40026739的博客
03-01 449
对象模型（Object Model）
（软件工程复习核心重点）第八章面向对象方法学-第三节：面向对象建模之对象模型
热门推荐
快乐江湖的博客
01-19 1万+
文章目录一：概念（1）定义（2）工具二：类图的基本符号（1）定义类A：表示B：命名规则（2）定义属性（3）定义服务三：表示关系的符号（1）关联A：定义B：关联的角色C：普通关联①：定义②：表示D：限定关联①：定义②：表示③：意义E：关联类①：定义②：表示（2）聚集（它是关联的特例）A：共享聚集B：组合聚集（3）泛化（本质就是继承）A：普通泛化①：抽象类②：具体类B：受限泛化①：定义②：约束（4）依赖和细化A：依赖关系B：细化关系 一：概念 （1）定义 对象模型表示静态的、结构化的系统的数据性质。它是对模拟客
js 23种设计模型详解附代码详解
一步一个脚印，踏实努力，向着目标前进
06-07 769
媒体模式（Memento Pattern）：在不破坏对象的封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。行为型模式：用于描述对象之间的交互方式，包括观察者模式、命令模式、迭代器模式、模板方法模式、策略模式、职责链模式、状态模式、访问者模式、中介者模式等。观察者模式（Observer Pattern）：定义对象之间的一种一对多的依赖关系，当对象的状态发生改变时，所有依赖于它的对象都得到通知并自动更新。观察者模式是一种当一个对象被修改时，会自动通知它的依赖者的模式。
JavaScript模块定义
攀登Fox的博客
05-15 984
介绍 JavaScript模块定义需要遵循“开闭原则”，即对修改关闭，对扩展开放，下文将从三个不同的层次进行演示说明。 目录介绍形态一：自定义对象形态二：自定义函数形态三：自定义模块 形态一：自定义对象 如代码所示，我们定义一个userObj对象，里面封装了它的属性，这种代码结构更加规范整洁，调用时比流水账式的js代码舒服很多。但是其也有不足之处，就是在外部可以随意修改对象的属性，不符合“开闭原则”，所以我们需要找到更好的写法。 <script type="text/javascript">
JavaScript对象模型
11-23
JavaScript对象模型
浅谈javascript对象模型和function对象
10-25
主要简单介绍了javascript对象模型和function对象，以及相关的示例代码，非常实用，需要的小伙伴参考下
对象模型
yanrong1095的博客
03-26 3022
别人的笔记汇总 目录三种对象模型简单对象模型表格驱动对象模型C++对象模型c++额外成本与对象大小c++额外成本一个类的对象的内存大小包括：构造函数构造函数是否会自动生成1.包含有带默认构造函数的对象成员的类2.继承自带有默认构造函数的基类的类3.带有虚函数的类4.带有一个虚基类的类拷贝构造函数（探讨编译器的工作）定义拷贝构造函数的应用何时生成拷贝构造函数（类没有的话编译器生成）成员初始化队列（M...
第二章对象模型（1）
pythonstrat的博客
08-09 1940
对象模型的概述 首先我们要始终铭记一句话：python是一门面向对象的语言！ 并且面向的彻底，可以称为 一切皆对象。 这句话说起来简单，如要真正的让你论述其正确性，这就需要很深的功底去理解。 列举常见的对象 1. 例如我们常讲的类 ，它就是 对象。类的细致描述就是类型，再细致解释说就是类型对象，比如：a = 3 # a 是 int类型 b = 'hello' # b 是字符串类型 接着 我们通过class 关键字定义的类，也称为自定义类型对象 通过类(类型对象)实例化得到的实例化对象 >
Js对象模型
刘振的博客
07-06 445
JS对象模型 JavaScript是一种基于原型(Prototype)的面向对象语言,而不是基于类的面向对象语言. C++ Java有类Class和实例instance的概念,类是一类事物的抽象,而实例则是类的实体 Js是基于原型的语言,它只有原型对象的概念,原型对象就是一个模板,新的对象从这个模板构建从而获取最初的属性.任何对象在运行时可以动态的增加属性.而且,任何一个对象都可以作为另一个对象的...
软件工程详细知识点（下）
qq_52108058的博客
02-08 921
完成对所需求解问题的分析，确定目标系统所要做的工作，定义所有与待解决问题相关类，并建立系统模型。（2）动态模型：描述系统的控制结构，它是用来确定各个对象之间交互及整体控制结构的模型。（1）对象模型：描述系统的数据结构，它是用来描述系统包含的对象及对象之间关系的模型。（3）功能模型：描述系统的功能结构，它是要描述系统要实现的功能的模型。改正在系统开发阶段已经发生的而系统测试阶段尚未发生的错误。扩充软件的功能和用户提出的新需求而进行的维护。适应软件环境发生的变化而进行的维护。（4）定义用例之间的关系。
JS中的对象模型
gezongbo的博客
03-11 852
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,用来操纵
Dynamics CRM 2015/2016 Web API：Unbound Function 和 Bound Function
GhostHouse
01-28 2478
今天我们来看看Dynamics CRM Web API Function 吧， 这是一个新概念，刚接触的时候我也是比较的迷糊，这样的命名确实是和之前的那套基于SOAP协议的API完全联系不上。好了，不说闲话了。这里的Function呢，就我来看，更像是一些被封装好的原生函数和老API中的Request差不多的意思，只是API的架构方式变了，所以名称也就跟着变了。我们之前要查看当前登录用户的信息，需
function和bound method的区别
smartcat2010的博客
11-09 893
Python官方文档 Method被调用时，self会自动加到函数列表首位； Method就是封装了一个func和一个class object； Function的__get__可以把自己和一个class object封装到一个bounded method里面去； Python’s object oriented features are built upon a function based environment. Using non-data descriptors, the two a.
全面理解Javascript中Function对象的属性和方法
weixin_30316097的博客
09-14 184
函数是 JavaScript 中的基本数据类型，在函数这个对象上定义了一些属性和方法，下面我们逐一来介绍这些属性和方法，这对于理解Javascript的继承机制具有一定的帮助。 属性(Properties) arguments 获取当前正在执行的 Function 对象的所有参数，是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由argument...
three.js查询对象模型
06-02
在Three.js中，您可以通过以下方法来查询对象模型： 1. 选择对象 通过使用`THREE.Object3D`类中的`getObjectByName`方法，您可以使用对象的名称选择对象。例如，`scene.getObjectByName('objectName')`将返回名为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值