浅谈Javascript中的对象和继承


Posted in Javascript onApril 19, 2019

Javascript是一门函数式编程语言,Javascript当中函数是核心,在Javascript中函数也是对象,函数对象在创建的时候会被添加属性和方法。

在Javascript中函数对象有两种调用方式,一种是new关键字的调用,另一种是没有new关键字的调用,前者会返回一个对象,后者会返回return语句中的内容。

function Obj (name) {
 this.name = name;
 return name;
}

用new关键字来调用如下:

var obj = new Obj('张三') // 返回 { 'name': '张三' }

不用new关键字调用如下:

var obj = Obj('张三') // 返回 '张三'

说完了js当中的对象和调用方式,那让我们来理解下什么是对象。

什么是对象?

对象是类的一个实例(对象可不是女朋友),有状态和行为。例如:一个电脑就是一个对象,它的状态有:大小、颜色、品牌等,他的行为有:播视频、听音乐、聊天等。

而类是对象的抽象,可以理解为类是一个模板,它来描述一类对象的状态和行为。软件对象也有状态和行为,软件对象的状态就是属性,行为就是方法。在软件开发中,在方法中可以操作对象的内部状态,对象的相互调用也是通过方法来完成。

类既然可以理解为一个模板,我们通过一个Person的简单例子来理解下:

function Person (name, age, sex) {
 this.name = name;
 this.age = age;
 this.sex = sex;
 run = function () {
 console.log('Run')
 }
}

 在这个类中name,age,sex为这个类的属性,而run为这个类的方法;Person的职责是构造对象,进行对象的初始化。

接下来我们看下在js中如何声明并调用对象。

对象的创建(多种方法)

块级对象

var person = {
 name: '王小端coder',
 age: 29
}
console.log(person.name); // 王小端coder

构造函数 --- 系统自带

var obj = new Object();
obj.name = '王小端coder'

console.log(obj.name); // 王小端coder

系统自带的对象有:Object、Array、Number、Boolean、Date等

构造函数 --- 自定义

function Obj (name) {
 this.name = name;
}
var obj = new Obj('王小端coder');
console.log(obj.name); // 王小端coder

对象的增删改查

增:为对象添加一个属性

var person = {};
person.name = '王小端coder';
console.log(person.name);

删:通过delete操作符删除一个对象的属性

var person = {
 name: '王小端coder'
};
console.log(person.name); // 王小端coder
delete person.name;
console.log(person.name); // undefined

改:直接通过赋值来修改一个对象的属性

var person = {
 name: '王小端coder'
};
console.log(person.name); // 王小端coder
person.name = '王小端JS'
console.log(person.name); // 王小端JS

查:查询对象的属性,有两种方法

var person = {
 name: '王小端coder'
};
console.log(person['name']); // 第一种方法
console.log(person.name); // 第二种方法

原型的定义

原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过构造函数产生的对象,可以继承该原型的属性和方法,原型也是对象。

function Person (name, age) {
 this.name = name;
 this.age = age;
}

Person.prototype = {
 eat: function (food) {
 console.log('eat ' + food);
 },
 sleep: function () {
 console.log('sleeping');
 }
}
var person = new Person ('王小端coder', 29);
console.log(person.name); // 王小端coder
person.eat('apple') // eat apple

我们定义了一个Person构造函数,而属于Person构造对象共有的方法,则定义到了Person原型上。

查看构造函数原型的接口:隐士属性__proto__(其实我们能够访问原型的属性,或者说继承原型,靠的就是__proto__属性连接着构造函数和原型,可以说没有__proto__属性的存在,就无法实现原型的继承)直接通过new操作符创建的对象访问__proto__属性即可查看到原型。

原型链

原型链就是将一个个原型串联起来,形成一条原型继承的链子。Child继承Parent, Parent继承GrandParent, 而GrandParent没有自定义原型,所以默认为原型链的最顶端new Object();

对象的继承(多种方式)

创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现。记住,所有属性和方法都是公用的,因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法,也可以覆盖超类的属性和方法。和其他功能一样,JavaScript实现继承的方式不止一种。这是因为JavaScript中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。

我们先定义一个父类

// 定义一个父类
function Person (name) {
 this.name = name;
 this.sleep = function () {
 console.log('朕正在睡觉!');
 }
}
// 在父类原型上面增加一个方法
Person.prototype.eat = function (food) {
 console.log('朕现在吃的食物是:' + food);
}

下面为您介绍几种具体的继承方式:

原型链继承

// 定义一个婴儿来继承人的父类
function Baby () {
}
Baby.prototype = new Person();
Baby.prototype.name = '小端';

var baby = new Baby()
console.log(baby.name); // 小端
baby.eat('milk'); // 朕现在吃的食物是:milk

优点: 简单、易于实现;父类新增的原型方法和属性子类都能访问到;

缺点: 无法实现多继承;来自原型的对象的所有属性被所有实例共享;如果为子类增加属性和方法,无法放倒构造器中;创建子类实例时无法向父类构造函数传参;

构造继承

// 定义一个婴儿来继承人的父类
function Baby (name) {
 Person.call(this);
 this.name = name || 'Coder'
}

let baby = new Baby();
console.log(baby.name); // Coder
baby.sleep(); // 朕正在睡觉!
console.log(baby instanceof Person); // false
console.log(baby instanceof Baby); // true

优点: 可以实现多继承;创建子类时可以向父类传递参数;子类可以共享父类引用的属性;

缺点: 实例不是父类的实例;只能继承父类的实例属性和方法;无法实现函数复用,每个子类都有父类实例函数的副本,影响性能;

实例继承

function Baby (name) {
 var instance = new Person();
 instance.name = name || 'Coder';
 return instance;
}
let baby = new Baby();
console.log(baby.name); // Coder
baby.sleep() // 朕正在睡觉!

优点: 不限制调用方式,返回的对象具有相同的效果;

缺点: 不支持多继承;实例是父类的实例,不是子类的实例;

拷贝继承

// 定义一个婴儿来继承人的父类
function Baby (name) {
 var person = new Person();
 for (let p in person){
  Baby.prototype[p] = person[p];
 }
 Baby.prototype.name = name || 'Coder';
}
let baby = new Baby();
console.log(baby.name); // Coder
baby.sleep() // 朕正在睡觉!

优点: 支持多继承;

缺点: 效率较低,内存占用高;无法获取父类不可枚举的方法;

注意:不可枚举的方法是不能使用for in访问到的方法

组合继承

// 定义一个婴儿来继承人的父类
function Baby (name) {
 Person.call(this);
 this.name = name || 'Coder';
}
Baby.prototype = new Person();
Baby.prototype.constructor = Baby;

let baby = new Baby();
console.log(baby.name); // Coder
baby.eat('milk'); // 朕现在吃的食物是:milk

优点: 不存在引用属性共享问题,可以传参,函数可复用;

缺点: 调用两次构造函数,生成了两份实例;

寄生组合继承

// 定义一个婴儿来继承人的父类
function Baby (name) {
 Person.call(this);
 this.name = name || 'Coder';
}
(function () {
 let Super = function () {};
 Super.prototype = Person.prototype;
 Baby.prototype = new Super();
})();

let baby = new Baby();
console.log(baby.name); // Coder
baby.eat('milk'); // 朕现在吃的食物是:milk

优点: 整合了以上几种继承的优点;

缺点: 实现复杂;

ES6的class

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

可以像如下定义:

class Person {
 constructor (name) {
  this.name = name;
 }
 sleep () {
  console.log('朕正在睡觉!');
 }
 eat (food) {
  console.log('朕现在吃的食物是:' + food);
 }
}

let person = new Person('小端');
console.log(person.name); // 小端
person.eat('milk'); // 朕现在吃的食物是:milk

ES6 class的继承

// 定义一个婴儿来继承人的父类
class Baby extends Person {
 constructor(name){
  super(name);
 }
}
let baby = new Baby('小端');
console.log(baby.name); // 小端
baby.eat('milk'); // 朕现在吃的食物是:milk

我们可以看到Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。

我之后会单独用一章来详细讲ES6中的Class和继承。

以上所述是小编给大家介绍的Javascript中的对象和继承详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS中的substring和substr函数的区别说明
May 07 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
layUI实现列表查询功能
Jul 27 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
详解如何在Vue项目中导出Excel
Apr 19 #Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 #Javascript
详解vue中使用微信jssdk
Apr 19 #Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 #Javascript
this.$toast() 了解一下?
Apr 18 #Javascript
Vue-input框checkbox强制刷新问题
Apr 18 #Javascript
vue axios封装及API统一管理的方法
Apr 18 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
深入php socket的讲解与实例分析
2013/06/13 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
php实现文件预览功能
2017/05/23 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js密码强度校验
2015/11/10 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
python同步windows和linux文件
2019/08/29 Python
Python数组并集交集补集代码实例
2020/02/18 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
股权转让协议书
2014/04/12 职场文书
家长会学生演讲稿
2014/04/26 职场文书
体育活动总结范文
2014/05/04 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
大学生心理活动总结
2014/07/04 职场文书
专业见习报告范文
2014/11/03 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
杨善洲观后感
2015/06/04 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python