您现在的位置是:首页 > 正文

简述JS中的面向对象编程 热门推荐

2024-02-01 01:52:06阅读 3

简述JS中的面向对象编程

背景介绍

在 JavaScript 中,大多数事物都是对象, 从作为核心功能的字符串和数组,到建立在 JavaScript 之上的浏览器
API。你甚至可以自己创建对象,将相关的函数和变量封装打包成便捷的数据容器。理解这种面向对象(object-oriented, OO) 的特性对于进一步学习 JavaScript
语言知识是必不可少的。这个模块将帮助你了解“对象”,先详细介绍对象的设计思想和语法,再说明如何创建对象。

知识剖析

然后,所谓面向对象编程,我觉得主要有以下几个知识点

1.理解对象以及访问对象的两种表示法
2.'this'
的含义
3.面向对象的程序设计
4.构造函数和对象实例
5.原型链
6.prototype 属性
7.constructor 属性
8.原型式继承

那什么是对象呢?

对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)。我们来看一个例子:

var person = {
   
name: ['Bob', 'Smith'],
    age: 32,
    gender: 'male',
    interests: ['music', 'skiing'],
    bio: function () {
        alert(this.name[0] + ' ' + this.name[1]+ ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1]+ '.');
    },
    greeting: function () {
        alert('Hi! I\'m ' + this.name[0]+ '.');
    }
};

这就是一个典型的对象的例子,作为一个人,具有姓名,年龄,性别,爱好等等属性,而且有各种方法,会打招呼(greeting()),会做饭。

而我们想要访问到这个属性的话,就要用到点表示法,person.age.调用方法,也是同样,person.greeting();即可

我们来看一下括号表示法和点表示法的区别

function append() {
   
var attr=$("#name").val();
    var num=$("#value").val();
   person[attr]=num;
    console.log(person);
}

 

我们通过括号表示法,可以给对象添加新的key和value,



继续添加



我们就添加了键值对的名字,这是点表示法做不到的,点表示法不能使用变量作为属性名。

2.this的指向

在对象里,关键字"this"指向了当前代码运行时的对象,比如上面这个代码,this实际上指向了当前的对象。所以当我们调用这个方法的时候,greeting()

greeting: function (){
   
alert('Hi! I\'m ' + this.name[0] + '.');
}

会弹出当前对象的名字


3.面向对象的程序设计

最基本的 OOP 思想就是我们想要在我们的程序中使用对象来表示现实世界模型,并提供一个简单的方式来访问它的功能,否则很难甚至不能实现.

对象可以包含相关的数据和代码,这些代表现实世界模型的一些信息或者功能,或者它特有的一些行为.对于一个人(person)来说,我们能在他们身上获取到很多信息(他们的住址,身高,鞋码,基因图谱,护照信息,显著的性格特征等等),然而,我们仅仅需要他们的名字,年龄,性别,兴趣这些信息,然后,我们会基于他们的这些信息写一个简短的介绍关于他们自己,在最后我们还需要教会他们打招呼。以上的方式被称为抽象-为了我们编程的目标而利用事物的一些重要特性去把复杂的事物简单化

比如对于人这个类来说,它具有各种基本属性和方法,人与人之间的区别只是属性的值不一样,这样我们就简单构造了一个类来描述真实的世界。


  对于前端来说,我们在javaScript里用构造函数来实现面向对象编程。废话不多说,来看一个例子吧。

 function Person(first, last, age, gender,interests) {
    this.name = {
        first,
        last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
}

我们首先定义了一个类别为人的构造函数,当我们想要描述一个人的时候,给他传进去参数就可以了,比如

var person1=new Person('Chris','Martin',32,'male',['music','guitar']);

我们首先定义了Christ Martin

再定义一个人

var person2=new Person('Gwyneth','Paltrow','35','female',['ironman','movie'])

 

是不是很方便快捷。

4.原型链

JavaScript 常被描述为一种基于原型的语言 (prototype-based
language)
——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype
chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

比如当我们调用person1.valueOf方法的时候,先是在person1里查找valueOf()方法,没找到,继续找它的原型,也就是构造函数Person,还是没找到,接着去对象的方法里去找,找到了,然后就成功调用了。

5.constructor和prototype属性

prototype 属性:继承成员被定义的地方,继承的属性和方法是定义在 prototype 属性之上的。然后每个对象实例都具有 constructor 属性,它指向创建该实例的构造器函数。

常见问题

何时在javaScript里使用继承呢?

在小型项目中或者刚开始学习时 -
   
因为当不需要对象和继承的时候,仅仅为了使用而使用它们只是在浪费时间而已。但是随着代码量的增大,你就会越来越发现它的必要性。当我们开始创建一系列拥有相似特性的对象时,那么创建一个包含所有共有功能的通用对象,然后在更特殊的对象类型中继承这些特性,将会变得更加方便有用

编码实战

function Person(first, last, age, gender, interests) {
    this.name = {
        first,
        last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
}

var person1=new Person('Chris','Martin',32,'male',['music','guitar']);
var person2=new Person('Gwyneth','Paltrow','35','female',['ironman','movie'])

//
//
var person2=Object.create(person1);


console.log(person1.constructor==person2.constructor);

Person.prototype.farewell = function() {
    alert(this.name.first + ' has left the building. Bye for now!');
};


Person.prototype.greeting = function () {
    alert('Hi! I\'m ' + this.name.first + '.');
};
Person.prototype.bio = function () {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
};

function Teacher(first, last, age, gender, interests, subject) {
    Person.call(this, first, last, age, gender, interests);
    this.subject=subject;
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;
Teacher.prototype.greeting = function() {
    var prefix;

    if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
        prefix = 'Mr.';
    } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
        prefix = 'Mrs.';
    } else {
        prefix = 'Mx.';
    }

    alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};
典型的构造函数以及继承的使用方法。

扩展思考

除了面向对象编程,还有哪些编程方法?
参考文献
《JavaScript高级编程设计》
Javascript 原型链之原型对象、实例和构造函数三者之间的关系
MDN JavaScript对象入门

更多讨论

 
1.  原型对象和构造函数的区别?
Object是构造函数,而Object.prototype是构造函数的原型对象。构造函数自身的属性和方法无法被共享,而原型对象的属性和方法可以被所有实例对象所共享。
2.什么是类?
定义对象的特征。它是对象的属性和方法的模板定义.而每一个新的对象,都是类的一个实例。
3.继承怎么用呢?
Javascript中,继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中可以使用 Object.create 实现继承.
 

 


网站文章

  • RocketMQ 消息消费

    RocketMQ 消息消费

    本章主要分析 RocketMQ 如何消费消息,重点剖析消息消费的过程中需要解决的问题 。 ·消息队列负载与重新分布 ·消息消费模式 ·消息拉取方式 ·消息进度反馈 ·消息过滤 ·顺序消息 1 Rock...

    2024-02-01 01:51:57
  • Odoo ORM API(六)- Inheritance and extension and Domains

    Odoo ORM API(六)- Inheritance and extension and Domains

    Inheritance and extensionOdoo 提供了三种不同机制用来扩展models in a modular way:继承一个已经存在的model,添加一些新的属性或者方法,但是,源model不会增加属性或方法,只是自己改变在另外一个 Odoo module 中,直接扩展源model,给他添加新的属性或方法,而不用去修改源码delegating some of the mode

    2024-02-01 01:51:51
  • 【Python】格式化字符串输出

    一 简介 python 字符串输出格式化有两种方式 %[s,d,] ,python 2.6 版本提供了string.format(),其功能也相当强大。talk is cheap,show me the code ....

    2024-02-01 01:51:44
  • vue常用修饰符

    一、v-model修饰符1、.lazy:输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据2、.trim:输入框过滤首尾的空格<input type="text" v...

    2024-02-01 01:51:18
  • 判断一个字符串中是否包含中文字符

    判断一个字符串中是否包含中文字符

    判断一个字符串中是否包含中文字符

    2024-02-01 01:51:12
  • docker部署前后端分离项目

    docker部署前后端分离项目

    一、操作系统准备:centos7.8二、docker环境准备:参考:Install Docker Engine on CentOS | Docker Documentation(1)卸载之前版本sud...

    2024-02-01 01:51:05
  • Python之异常设计(一)

    一 定义 异常分为两类:一类是自动触发异常如除零错误;另一类是通过raise触发。 二 为什么要使用异常 当程序运行时,如果检测到程序错误,Python就会引发异常,我们可以在程序中使用try语句捕获异常,并对异常进行处理。如果我们不做异常的捕获,异常就会一直往上层抛出,直到顶层Python的默认异常处理器,默认异常处理器将会停止程序并打印异常,这通常会引起程序崩溃,造成不好的用户体验,...

    2024-02-01 01:50:35
  • Redis 高可用之持久化

    Redis 高可用之持久化

    在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常服务(99.9%、99.99%、99.999%等等)。但是在Redis语境中,高可用的含义似乎要宽泛一些,除了保证提供正常服务( 如主从分离、快速容灾技术),还需要考虑数据容量的扩展、数据安全不会丢失等。

    2024-02-01 01:50:29
  • 14. 二分查找

    DescriptionFor a given sorted array (ascending order) and a target number, find the first index of t...

    2024-02-01 01:50:23
  • 大数据—Hadoop生态圈

    大数据—Hadoop生态圈

    前言 整理了一下目前常用的hadoop组件,后续将会对这些组件的具体应用场景和使用细节进行展开分析。如果大家发现有更好的建议欢迎大家在下方留言。

    2024-02-01 01:49:55