0

0

JS对象继承使用案例详解

php中世界最好的语言

php中世界最好的语言

发布时间:2018-06-04 10:47:42

|

1717人浏览过

|

来源于php中文网

原创

这次给大家带来js对象继承使用案例详解,js对象继承使用的注意事项有哪些,下面就是实战案例,一起来看一下。

修改非自己拥有的对象是解决某些问题很好的方案。在一种“无公害”的状态下,它通常不会发生;发生的原因可能是开发者遇到了一个问题,然而又通过修改对象解决了这个问题。尽管如此,解决一个已知问题的方案总是不止一种的。大多是计算机科学知识已经在静态类型语言环境中进化出了解决难题方案,如Java。可能有一些方法,所谓的设计模式,不直接修改这些对象而是扩展这些对象。

在JS之外,最受欢迎的对象扩充的形式是继承。如果一种类型的对象已经做到了你想要的大多数工作,那么继承自它,然后再新增一些功能即可。在JS中有两种基本的形式:基于对象的继承和基于类型的继承。

在JS中,继承仍然有一些很大的限制。首先,不能从DOM或BOM对象继承。其次,由于数组索引和length属性之间错综复杂的关系,继承自Array是不能正常工作的。

基于对象的继承

在基于对象的继承中,也经常叫做原型继承,一个对象继承另外一个对象是不需要调用构造函数的。ES5的Object.create()方法是实现这种继承的最简单的方式。例如:

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"

这个例子创建了一个新对象myPerson,它继承自person。这种继承方式就如同myPerson的原型设置为person,从此myPerson可以访问person的属性和方法,而不需要同名变量在新的对象上再重新定义一遍。例如,重新定义myPerson.sayName()会自动切断对person.sayName()的访问:

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"

Object.create()方法可以指定第二个参数,该参数对象中的属性和方法将添加到新的对象中。例如:

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"

这个例子创建的myPerson对象拥有自己的name属性值,所以调用sayName()显示的是“Greg”而不是“Nicholas”。

一旦以这种方式创建了一个新对象,该新对象完全可以随意修改。毕竟,你是该对象的拥有者,在自己的项目中你可以任意新增方法,覆盖已存在方法,甚至是删除方法(或者阻止它们的访问)。

android界面布局详解 中文WORD版
android界面布局详解 中文WORD版

本文档主要讲述的是android界面布局详解;在通过“Hello World!”介绍Android中的布局问题之前,不得不先介绍一下Android中的用户界面,因为布局问题也是用户界面问题之一。在一个Android应用程序中,用户界面通过View和ViewGroup对象构建。Android中有很多种Views和ViewGroups,他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过

下载

基于类型的继承

基于类型的继承和基于对象的继承工作方式是差不多的,它从一个已存在的对象继承,这里的继承是依赖于原型的。因此,基于类型的继承是通过构造函数实现的,而非对象。这意味着,需要访问被继承对象的构造函数。比起JS中原生的类型,在开发者定义了构造函数的情况下,基于类型的继承是最合适的。同时,基于类型的继承一般需要两步:首先,原型继承;然后,构造器继承。构造器继承是调用超类的构造函数时传入新建的对象作为其this的值。例如:

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();

这段代码里,Author类型继承自Person。属性name实际上是由Person类管理的,所以Person.call(this, name)允许Person构造器继续定义该属性。Person构造器是在this上执行的,this指向一个Author对象,所以最终的name定义在这个Author对象上。

对比基于对象的继承,基于类型的继承在创建新对象时更加灵活。定义了一个类型可以让你创建多个实例对象,所有的对象都是继承自一个通用的超类。新的类型应该明确定义需要使用的属性和方法,它们与超类中的应该完全不同。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

web开发中如何避免空比较

为什么web开发中需要避免使用全局变量

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

4

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

7

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

42

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

4

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

3

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号