侧边栏壁纸
博主头像
小佑Blog| 小佑前端 | WEB前端博客 | WEB前端笔记 博主等级

未来属于那些相信梦想,并愿意为之付诸行动的人

  • 累计撰写 69 篇文章
  • 累计创建 92 个标签
  • 累计收到 67 条评论

目 录CONTENT

文章目录

JavaScript检测类型 / 原型继承 基础干货!

@小佑前端
2020-11-17 / 0 评论 / 0 点赞 / 776 阅读 / 0 字 / 正在检测是否收录...

检测类型的四种办法

  • typeof // 类型检测
  • instanceof // 主要用来判断某个实例是不是隶属于某个类(f1 instanceof fn)
  • Object.prototype.toString.call()
  • constructor

in()

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

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

hasOwnProperty()

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

function Fn(){
	this.num = 10
}
var f2 = new Fn();
console.log(f2.hasOwnProerty("num"))

hasOwnPublicProperty()

// 检测一个属性是不是这个对象的公有属性,返回的是布尔值,共有的是

// 最简单的封装一个可以简化一些用到三元运算符。
在评论区留下你感觉最简化得到封装吧。
function hasOwnPublicProperty(obj,attr){
	if(attr in obj){
	  	if(!obj.hasOwnProperty(attr)){
			return true
		}else {
			return false 
		}
	}
	return false 
    }
    

继承与原型

  • 所有的函数都有一个属性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()

image.png
image.png

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();
0

评论区