js继承宿舍

news/2024/7/19 15:21:05 标签: js

构造函数继承

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
</body>

</html>
<script>
  function Animal(name) {
    this.type = "animal"
    this.name = name
    this.a = [1, 2]
    this.sleep = function () {
      console.log(this.name + "在睡觉");
    }
  }
  function Animal2(name) {
    this.name = name
    this.play = function () {
      console.log(this.name + "正在玩");
    }
  }
  Animal.prototype.age = 5
  Animal.prototype.eat = function (food) {
    console.log(this.name + "正在吃" + food);
  }
  function cat(name) {
    //构造继承
    Animal.call(this)
    Animal2.call(this)
    this.name = name
  }
  const a = new cat("z")
  //调用animal1的sleep
  a.sleep()
  //调用animal的play
  a.play()
</script>

在这里插入图片描述
这样在父函数里面定义方法this就指向子类
在这里插入图片描述

原型链继承

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  function Animal(name) {
    this.type = "animal"
    this.name = name
    this.sleep = function () {
      console.log(this.name + "在睡觉");
    }
  }
  Animal.prototype.age = 5
  Animal.prototype.eat = function (food) {
    console.log(name + "正在吃" + food);
  }
  function cat(name) {
    this.name = name
  }
  const a = new Animal("猫")
  //原型链继承
  cat.prototype = new Animal()
  cat.prototype.constructor = cat
  const b = new cat("狗")
  console.log(a.name);
  console.log(b.name);
  b.sleep()
  console.log(cat.prototype.constructor);
</script>

在这里插入图片描述

让原型链直接等于父类的构造函数，然后让子类的prototype.constructor指向他自己，因为让原型链直接等于父类的构造函数子类的prototype.constructor指向的就不是它本身了
在这里插入图片描述

缺点
在这里插入图片描述

组合继承

就是构造函数继承和原型链继承的结合

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
 
</body>

</html>
<script>
function Animal(name){
  this.type="animal"
  this.name=name
  this.sleep=function(){
      console.log(this.name+"在睡觉");

  }
}
Animal.prototype.age=5
Animal.prototype.eat=function(food){
    console.log(name+"正在吃"+food);
}
function cat(name){
    Animal.call(this)
    this.name=name
}
const a=new Animal("SS")
//原型链继承
cat.prototype=new Animal()
cat.prototype.constructor=cat
const b=new cat("ss")
b.a="mao"
const c=new cat("sddd")
console.log(b.a);
console.log(c.a);
</script>

在这里插入图片描述
在这里插入图片描述

寄生继承

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  function Animal(name) {
    this.type = "animal"
    this.name = name
    this.sleep = function () {
      console.log(this.name + "在睡觉");

    }
  }
  Animal.prototype.age = 5
  Animal.prototype.eat = function (food) {
    console.log(name + "正在吃" + food);
  }

  function cat(name) {
    this.aaa="cataa"
    const intance = new Animal(name)
    intance.__proto__ = Animal.prototype
    return intance
  }
  const b = new cat("ss")
  b.a = "mao"
  const c = new cat("sddd")
  console.log(b.a);
  b.eat("ss")
  console.log(b.aaa);
</script>

无聊的继承就是把父类复制过来，自己的东西没有了
在这里插入图片描述

寄生继承2

寄生组合继承（完美继承）

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  function Animal(name) {
    this.type = "animal"
    this.name = name
    this.sleep = function () {
      console.log(this.name + "在睡觉");
    }
  }
  Animal.prototype.age = 5
  Animal.prototype.eat = function (food) {
    console.log(name + "正在吃" + food);
  }

  function cat(name) {
    this.aaa = "cataaa"
    Animal.call(this)
  }
  //寄生组合继承需要一个第三方函数，把他用立即执行函数抱起来防止污染全局
  (function () {
    function abc() { }
    //让这个第三方函数进行原型链继承
    abc.prototype = Animal.prototype
    cat.prototype = new abc()
  })()
  const b = new cat("ss")
  b.a = "mao"
  const c = new cat("sddd")
  console.log(b.a);
  b.eat("ss")
  console.log(b.aaa);
  console.log(b.type);
</script>

在这里插入图片描述

创建一个第三方函数，让他的原型链等于父类原型链，子类的原型链等于第三方的构造函数(就是组合继承的升级版，把原型链继承中添加一个第三方函数，让这个第三方函数等于父类原型链，再让子类等于第三方函数的构造函数)

es6 extends 关键字继承

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  function Animal(name) {
    this.type = "animal"
    this.name = name
    this.sleep = function () {
      console.log(this.name + "在睡觉");
    }
  }
  Animal.prototype.age = 5
  Animal.prototype.eat = function (food) {
    console.log(name + "正在吃" + food);
  }
 class cat extends Animal{
   constructor(aaa,name,age){
     super(name,age)
     this.aaa=aaa
   }
   play(){
     console.log("你好");
   }
 }
const c=new cat("aaa","猫咪",12)
c.sleep()
c.play()
</script>

在这里插入图片描述


http://www.niftyadmin.cn/n/1371479.html

相关文章

webpack就会这些我就是要摆烂

webpack就会这些我就是要摆烂

webpack是一个打包工具&#xff0c;当用es6或者vue&#xff0c;react这些写代码的时候实际上服务器是不能识别的&#xff0c;还有js、css、图片文件需要单独进行压缩和打包&#xff0c;这样团队人员处理很繁琐&#xff0c;这些都可以借助webpack 作用 1.对 CommonJS 、 AMD 、…
阅读更多...
谈谈你对this的理解

谈谈你对this的理解

谈谈This对象的理解 this 总是指向函数的直接调用者&#xff08;而非间接调用者&#xff09; 如果有 new 关键字&#xff0c; this 指向 new 出来的那个对象 在事件中&#xff0c; this 指向触发这个事件的对象&#xff0c;特殊的是&#xff0c; IE 中的 attachEvent 中的this…
阅读更多...
axios常用语法

axios常用语法

1.基本写法 第一种写法 axios.get(/data.json).then((res)>{console.log(res)})第二种 axios({method:get,url:/data.json }).then((res)>{console.log(res) })当要携带参数 第一种 axios.get(/data.json,{params:{id:12}}).then((res)>{console.log(res)})第二种 a…
阅读更多...
关于箭头函数

关于箭头函数

1.没有 this 箭头函数没有 this&#xff0c;所以需要通过查找作用域链来确定 this 的值。 2. 没有 arguments 但是可以这么输出 3.箭头函数没有实例 图片来自&#xff1a;https://juejin.cn/post/6844903616231260174#heading-4 4. 没有原型 我们所定义得函数什么的都是他…
阅读更多...
Foo.getName()的输出问题

Foo.getName()的输出问题

<script>function Foo() {getName function () { alert(1); };return this;}Foo.getName function () { alert(2); };Foo.prototype.getName function () { alert(3); };var getName function () { alert(4); };function getName() { alert(5); }//请写出以下输出结果…
阅读更多...
实现两个大数相加

实现两个大数相加

<script> let a "9007199254740991"; let b "1234567899999999999";function add(a ,b){//取两个数字的最大长度let maxLength Math.max(a.length, b.length);//用0去补齐长度 padStart第一个参数为长度&#xff0c;第二个为要补全的元素a a.pad…
阅读更多...
数组的去重

数组的去重

1.利用对象 思路&#xff1a;定义一个对象和数组&#xff0c;用对象来判断数组里的每一个元素是否一样&#xff0c;把数组的每一个都作为对象的key如果对象里面存在这个key当前就不添加到新数组中&#xff0c;没过没有就添加到新数组中 const arry[1,5,3,6,3,5,3,6,6,3,5,8,9,…
阅读更多...
typeof与instanceof

typeof与instanceof

typeof typeof 操作符返回一个字符串&#xff0c;表示未经计算的操作数的类型 typeof 1 // number typeof 1 // string typeof undefined // undefined typeof true // boolean typeof Symbol() // symbol typeof null // object typeof [] // object typeof {} // object ty…
阅读更多...
最新文章

Copyright @ 2022~2023