JS继承和检测类型放在这里了, 走过路过千万不要错过。

熱心网友
104 阅读3分钟

本文已参与『新人创作礼』活动，一起开启掘金创作之路

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

检测类型的四种办法

  • typeof // 类型检测
  • instanceof // 主要用来判断某个实例是不是隶属于某个类（f1 instanceof fn）
  • Object.prototype.toString.call() // 返回 [object NativeConstructorName] 格式的字符串
  • constructor // 判断数据类型,包括数组、日期、对象等，可以区分清楚

in()

检测当前对象是否存在某个属性，不论是公有属性还是私有属性,只要是对象的属性,通过in检测返回的都是true

function Fn(){
	this.name = "lili"
}
let f1 = new Fn();
console.log("name" in f1)

hasOwnProperty()

检测一个属性是不是这个对象的私有属性,返回的是布尔值。

继承与原型

  • 所有的函数都有一个属性Prototype(原型,对象数据类型)。
  • prototype(原型)天生自带一个属性constructor（指向当前的类 / 构造函数）。
  • 所有的对象(普通对象,数组…protype/实例)都有一个属性__Proto__他指向所属类的原型先找自己的私有属性，
  • 原型基于__proto__找所属类原型上
  • 找不到则继续,一直到Object这个内置类的原型为止
  • Function.prototype是对象数据类型,所以他也是对象的一个实例，所以__proto__指向了对象的原型 所有的函数都是Function的一个实例 函数身上有两个属性:prototype/proto
  • 当谈到继承时，JavaScript只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（proto），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

附图： image.png

原型继承

function A(){
	this.name = "lili"
   }
A.prototype.getY = function(){
	console.log("A共有属性的方法")
  }
var A = new A()

function B(){
	this.B = "xiaoming"
}
B.prototype = new A()

附图： image.png

中间类继承

  • 某些示例并不属于某些类,但是想用其原型上的方法,我们可以手动的去更改实例的__proto__,让他指向这个类的原型,就可以使用其原型上的方法了
function fn(){
	arguments.__proto__ = Array.prototype
	var res = arguments.sort((a,b)=>{
	return a-b
	})
	console.log(res)
    }
fn(3,5,9,5,10)

附图： image.png

call继承

function A(){
    this.A = "A"
    this.X = 100
}
function B(){
    A.call(this) // 此时的this是B相当于把A里面的this置换成B的实例
    this.B = "B"
    this.Y = "200"
}

寄生组合原型继承

function A(){
	this.A = 10
	this.B = 20
    }

function B(){
	this.C = 30
	this.D = 40
   }
var b = new B()
B.prototype = Object.create(A.prototype) // 创建一个空对象,并且让空对象的__proto__指向
//参数

重定向

function A(){
	this.A = 100
   }

A.prototype = { // 这样的写法相当于把A.prototype给更改成指向一个空对象的__proto__
constructor：Fn // 可以自己加上一个constructor让他自己在指向类/构造函数
   }
var a = new A()

extends继承

class A{ // 既不是对象也是作用域
  constructor(name){
      super();
      this.x=100;
      this.y=200;
   }
   // 原型上的方法
   getA(){
        console.log("getA")
   }
   // 给实例添加私有属性
   f=300
   // 把A这个类当成对象，给它添加静态属性
   static a=600
      
}
class B extends A{
   constructor(){
       super();// 相当于是call继承
       this.a="a";
       this.b="b";
   }
    getB(){
    console.log("getB")
  }
  fn(){
   //通过super 可以拿到A类原型上的方法
    super.getA();
  }
}
var b=new B();
b.fn();

文章有错误或者遗漏地方的小伙伴可以在评论区评论哦~

avatar
文章
阅读
粉丝