如何使用JavaScript继承机制

最新推荐文章于 2024-01-25 16:50:25 发布
最新推荐文章于 2024-01-25 16:50:25 发布
阅读量107 收藏
点赞数
分类专栏： 关于前端 就这样写 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38289787/article/details/108218755
版权

看注释就够

原型链继承

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		function Parent() {
			this.money = 100000
			this.head = 1
		}

		function Child(name, age) {
			this.name = name
			this.age = age
		}
		//要放在创建实例之前
		// 会造成继承链紊乱
		Child.prototype = new Parent()
		var son = new Child('jiffy', 22)
		// 手动拨正
		Child.prototype.constructor = Child
		alert(Child.prototype.constructor)
		alert(Parent.prototype.constructor)
		alert(son.name)
		alert(son.age)
		alert(son.money)
		alert(son.head)

	</script>
</body>

</html>

prototype属性直接继承

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		function Parent() { }
		// 将要继承的属性赋给prototype属性
		Parent.prototype.money = 100000
		Parent.prototype.head = 1

		function Child(name, age) {
			this.name = name
			this.age = age
		}
		// 直接继承父类prototype属性 省去new对象节省内存
		// 还是会继承链紊乱
		Child.prototype = Parent.prototype
		var son = new Child('jiffy', 22)
		// 手动拨正
		Child.prototype.constructor = Child
		// 新问题，因为手动拨正的原因，父类构造函数变成子类的了
		alert(Child.prototype.constructor)
		alert(Parent.prototype.constructor)
		alert(son.name)
		alert(son.age)
		alert(son.money)
		alert(son.head)

	</script>
</body>

</html>

空对象作为中介

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		function Parent() {

		}
		// 将要继承的属性赋给prototype属性
		Parent.prototype.money = 100000
		Parent.prototype.head = 1

		function Child(name, age) {
			this.name = name
			this.age = age
		}

		// 空对象 几乎不占内存 解决父类构造器同步改变
		function extend(Son, Father) {
			var N = function () { }
			N.prototype = Father.prototype
			Son.prototype = new Father()
		}
		// 依然会造成继承链紊乱 
		extend(Child, Parent)
		var son = new Child('jiffy', 22)
		// 手动拨正
		Child.prototype.constructor = Child


		alert(Child.prototype.constructor)
		alert(Parent.prototype.constructor)
		alert(son.name)
		alert(son.age)
		alert(son.money)
		alert(son.head)

	</script>
</body>

</html>

构造函数绑定

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		function Parent() {

		}
		// 将要继承的属性赋给prototype属性
		Parent.prototype.money = 100000
		Parent.prototype.head = 1

		function Child(name, age) {
			this.name = name
			this.age = age
		}

		// 空对象 几乎不占内存 解决父类构造器同步改变
		function extend(Son, Father) {
			var N = function () { }
			N.prototype = Father.prototype
			Son.prototype = new Father()
		}
		// 依然会造成继承链紊乱 
		extend(Child, Parent)
		var son = new Child('jiffy', 22)
		// 手动拨正
		Child.prototype.constructor = Child


		alert(Child.prototype.constructor)
		alert(Parent.prototype.constructor)
		alert(son.name)
		alert(son.age)
		alert(son.money)
		alert(son.head)

	</script>
</body>

</html>

组合继承

说实话，在探索到它的意义之前，我认为这是鸡肋的实现方式。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h1>组合继承</h1>
    <strong>也叫伪经典继承</strong>
    <ul>
      <li>将原型继承和构造函数继承组合在一块</li>
      <li>原型链实现对原型属性和方法的继承</li>
      <li>借用构造函数实现对实例属性的继承</li>
    </ul>
  </div>
  <script>
    function Parent() {
      this.money = 100000
      this.head = 1
      this.hobbies = ['reading', 'fight', 'sleep']
      this.say = function () {
        alert('我喜欢' + this.hobbies)
      }
    }
    // TODO 这和单独使用构造函数实现继承效果一样 所以多敲几行代码有什么意义？
    // Parent.prototype.say = function () {
    //   alert('我是原型方法，通过原型链继承')
    // }

    function Child(name, age) {
      // 将父对象的构造函数绑定在子对象中
      Parent.call(this)
      this.name = name
      this.age = age
    }

    // Child.prototype = new Parent()
    // Child.prototype.constructor = Child
    var son = new Child('jiffy', 22)
    alert(Child.prototype.constructor)
    alert(Parent.prototype.constructor)
    son.say()

  </script>
</body>

</html>

拷贝继承

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h1>拷贝继承</h1>
    <strong>把父对象的所有属性和方法，拷贝进子对象</strong>
    <p>将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象中</p>
  </div>
  <script>
    function Parent() {
    }
    Parent.prototype.money = 100000
    Parent.prototype.head = 1
    Parent.prototype.say = function () {
      alert('虽然我只有一个头，但我有' + this.money + '块')
    }

    function Child(name, age) {
      this.name = name
      this.age = age
    }

    function extend(Son, Father) {
      var fa = Father.prototype
      var son = Son.prototype
      for (var i in fa) {
        son[i] = fa[i]
      }
    }

    extend(Child, Parent)
    var son = new Child('jiffy', 22)
    alert(Child.prototype.constructor)
    alert(Parent.prototype.constructor)
    son.say()

  </script>
</body>

</html>
zhang13pro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】深入浅出JavaScript继承机制：解密原型、原型链与面向对象实战攻略
Allen-
05-10 1111
本文全面解析了JavaScript中的继承机制，核心围绕原型链这一核心概念展开，阐述了其在对象继承中的作用与重要性，并介绍了几种主要的继承实现方式。以下是文章内容的概括：📌原型基础每个JavaScript对象都隐含一个属性，通常通过__proto__访问，指向创建它的构造函数的prototype对象。构造函数的prototype本身是个对象，包含可被实例共享的方法和属性。示例展示了如何通过原型链，实例能访问到构造函数原型上的方法。📌原型链的形成与查找规则。
JavaScript原型继承机制
liaoyoujinb的专栏
01-01 1023
JavaScript原型继承机制         JavaScript并非一个纯粹的面向的对象的语言，也没有一个实际意义上的继承机制。语言的设计者最初并未想实现继承机制，但是后来还是实现了一个类似的机制——原型继承机制。但实际上，这并非实际的继承，我们来一一揭开JavaScript的伪继承机制。 一、typeof 和 instanceof        在JavaScript中，
JavaScript 原型继承机制
09-09 571
JavaScript 原型继承机制
javascript继承机制
知其所以然
11-23 862
javascript的继承实现不同于类式继承，在传统的类式继承中， 一个对象必须诞生于一个特定的类，类成了所有对象的模板。 javascript作为一门面向对象或者叫基于对象的语言，自然也有 继承的概念，只不过实现的方式不同而已。在javascript中，继承 是通过一种原型继承的方式实现的。所
JS继承机制
热门推荐
Front end development engineer
01-19 2万+
继承是怎样实现的？ 要用 ECMAScript 实现继承机制，我们可以从要继承的基类入手。我们定义的类都可作为基类。出于安全原因，本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。 选定基类后，就可以创建它的子类了。是否使用基类完全由我们自己决定。有时，你可能想创建一个不能直接使用的基类，它只是用于给子类提供通用的函数。在这种情况下，基类被看作抽象类。 尽管 ECMAScript 并没有像其他语言那样严格地定义抽象类，但有时它的确会创建一些不允许使用的类
Javascript 类继承机制
用心做事
04-24 1190
Javascript本身不是面向对象的语言，但是，使用基于Prototype使得javascript具备面向对象的形。以Prototype对象来装饰存在的object，被称为“class-less, prototype-oriented, or instance-based programming”编程。        请看下面的一个简单的例子： var BaseCar = fun
javascript中继承的几种方式
m0_63153901的博客
06-12 3905
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。通过实例化一个函数使子类的原型指向父类的实例，子类就可以调用到父类的属性和方法。代码实现如下： 要注意的问题 1.不要忘记默认的类型： 在js中所有的引用类型都继承了Object，而继承也是通过原型链实现的。所有存在于Object原型对象上的方法同样也存在。比如：hasOwnProperty()、toString(
JavaScript继承与原型链
最新发布
专注
01-25 1301
原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。当你试图访问一个对象的属性时，如果在该对象本身中找不到该属性，就会在其原型中搜索该属性，如果仍然找不到，那么就会搜索原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾（即原型为null的对象）。1.1 在继承中，子类继承父类的特征和行为，使得子类对象具有父类的实例域和方法。继承和原型链是什么？
JavaScript中的继承机制：原型链
junxuezheng的博客
07-31 509
一、new运算符的缺点 用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。 比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。 function DOG(name){ 　　　　this.name = name; 　　　　this.species = ‘犬科’; 　　} 然后，生成两个实例对象： var dogA = new DOG(‘大毛’); 　　var do...
Javascript继承机制的设计思想
攀升·Lislie
05-08 802
转自 ： 阮一峰的网络日志 最近，同事考了我一个问题：javascript里面如何实现继承？我想了下，写出了jquery实现继承的方式，然而，我同事说，这不是他想看到的答案，他期望描述一下原生态的javascript继承机制，这下把我难倒了，我无法很清晰地描述出这个概念，后来决定还是自己找找，把这个问题弄清楚，于是，便找到了这篇blog，对于继承机制的设计原由讲得比较清楚，并且简单易
Javascript 继承机制实例
10-29
说明继承机制最简单的方法是，利用一个经典的例子——几何形状。
javascript继承机制实例详解
10-25
主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
Javascript 继承机制的实现
10-29
要用ECMAScript实现继承机制，首先从基类入手。所有开发者定义的类都可作为基类。出于安全原因，本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。
Javascript继承机制详解
10-19
JavaScript的继承机制是其动态类型语言特性的重要组成部分，它提供了多种实现方式来模拟面向对象编程中的继承概念。本文主要探讨两种常见的继承实现：对象冒充和原型方式。 1. **对象冒充**： 对象冒充是一种通过...
vue-devtools与yarn的填坑之路
weixin_38289787的博客
08-13 9116
地底之海 我好像是一个在海边玩耍的孩子，不时为发现一个个坑和它们之间相互联结的坑而欢欣鼓舞，而展现在我面前的是完全未探明的地底深坑，宛若大海一般深邃。——牛顿 相比FireFox，在Edge/Chrome上安装Vue.js devtools插件真是折腾，又是填坑之路。 ...
HTML引入CSS和JavaScript的方式
weixin_38289787的博客
07-20 2824
引入CSS之内联式 css代码直接写在要设置样式的HTML开始标签中，如果有多条css样式代码中间用英文分号隔开。如下代码： <p style= "color:red; font-size:12px">设置文本颜色和大小</p> 引入CSS之嵌入式 内联式css代码虽然简单，但是一旦需要设置的样式复杂起来，HTML代码看起来就会显得很混乱。 使用嵌入式CSS样式就可以解决这个问题。把css代码写在<style></style>标签之间。如下代码： &.
npm安装与webpack的下载
weixin_38289787的博客
08-07 1718
程序员解决问题就是要快首先--安装其次--使用最后--优化配置淘宝镜像总结感谢点赞 前端开发学习者现在逃不掉的要学npm，今天就来讲一讲如何在PC上安装npm并正常使用。整个过程很简单，无非就是踩坑掉坑填坑。 首先–安装 首先你得通过搜索引擎在形形色色的类似网址中找到一个正确链接，再根据操作系统选择对应安装包。然后傻瓜式安装在对应路径。最后，打开cmd输入npm -v看得到安装的npm版本号表示安装成功了。 其次–使用 打开IDE创建一个很随意的新项目，在Terminal窗口输入npm init -y来初始
Vue入门：看这一篇就够了
weixin_38289787的博客
07-31 1214
@[这是目录] 话不多说，直接开干。 先来个官网实栗吧。 官网实栗 <body> <!--第一个vue实栗--> <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //注意这里构造Vue
webpack-dev-server删除dist目录，图片不显示
weixin_38289787的博客
08-11 587
不是问题的问题哇擦本质参考感谢点赞 哇擦 配置 webpack-dev-server 不就是为了提高开发效率（懒），然后图片在火狐浏览器竟然显示不出来。一看我滴个亲娘勒，好家伙把我打包后生成的 dist 目录删了就不重新打包了（因为之前配置了clean-webpack-plugin插件，它的作用就是在打包之前把 dist 目录删除掉）？ 本质 好吧，在浏览器上搜了一圈，也没得到解决办法????。最后用 Chrome 找到 segmentfault社区才发现 使用webpack-dev-server是不会生成
简述JavaScript的伪继承机制。
05-30
JavaScript的伪继承机制指的是通过原型链实现对象之间的继承关系。在JavaScript中，每个对象都有一个原型对象，通过原型链，对象可以访问原型对象中的属性和方法。因此，可以通过将一个对象的原型对象设置为另一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值