浅谈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 相关文章推荐
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jquery选择器使用详解
Apr 08 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
微信小程序实现可长按移动控件
Nov 01 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
晶体管来复再生式二管收音机
2021/03/02 无线电
Zend Framework入门知识点小结
2016/03/19 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
vue如何截取字符串
2019/05/06 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
react的hooks的用法详解
2020/10/12 Javascript
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python读取oracle函数返回值
2016/07/18 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
关于python3中setup.py小概念解析
2019/08/22 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
软件测试工程师笔试题带答案
2015/03/27 面试题
材料加工硕士生求职信
2013/10/10 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
关爱留守儿童标语
2014/06/18 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
大国崛起观后感
2015/06/02 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
Python实现科学占卜 让视频自动打码
2022/04/09 Python
使用python绘制横竖条形图
2022/04/21 Python