JavaScript基础系列(五)

原型 prototype

• 每个函数都有一个原型 prototype

function fn(){}
console.log(fn.prototype) 
// 输出原型对象
//  constructor: ƒ fn1()
//    [[Prototype]]: Object

• 设置原型 通过Object.setPrototypeOf

let obj = {}
let o = {a:1}
Object.setPrototypeOf(obj,o) // 为obj设置原型为o
obj.a // 1 当前对象查找不到 去原型对象查找 直到找到顶层为null

原型链

• 每个构造函数都有一个原型对象，原型对象都包含一个构造函数，实例则包含一个指向原型对象的内部指针
• 原型对象也有可能拥有原型 一层一层被称为原型链

继承

• 组合继承
• 原型继承
• 寄生继承
• 寄生组合式继承

this的指向

• 是函数运行时自动生成的内部对象 指向它的对象

• 在函数不属于对象 执行时this指向window

  function fn() {
      console.log(this)
  }
  fn() // window
  

• 在对象中作为属性被调用 function指向本身函数 箭头语法指向window（箭头函数本身没有this）

  function fn() {
      console.log(this)
  }
  
  let fn1 = ()=>{
      console.log(this)
  }
  let obj = {
      fn:fn,
      fn1:fn1
  }
  
  obj.fn() // 指向fn函数
  obj.fn1() // 指向window
  

typeof

• 返回数据类型的字符串
• 使用方式
• typeof null 为obj是js存在很久的bug 可以使用===来判断

typeof 1 // "number"
typeof(1) // "number"
typeof "1" // "string"
typeof undefined // "undefined"
typeof true // "boolean"
typeof Symbol() // "symbol"
typeof null // "object"
typeof 2n // "bigint"
typeof console.log  // "function"

• 判断一个变量是否存在

typeof x !== "undefined" ? '存在':'不存在'

instanceof

• 用于检测构造函数prototype属性是否出现在某个实例对象的原型链上
• 使用方式

object instanceof constructor
// object 为实例对象 constructor为构造函数

let Fn = function() {}
let FnObj = new Fn()
FnObj instanceof Fn // true

type和instanceof区别

• typeof 会返回一个基本数据类型 instanceof会返回一个布尔值
• instanceof可以判断复杂引用类型 不能判断基础数据类型
• typeof能判断基础数据类型 引用类型除了function外不能判断

通用数据类型检测

• Object.prototype.toString 返回[Object 类型]的字符串
• 使用方式

let toString = Object.prototype.toString
toString.call(1) // '[object Number]'
toString.call(true) // '[object Boolean]'
toString.call(window) // '[object Window]'

• 实现一个全局通用数据类型判断方法

let type = (obj) => {
    let types = typeof obj
    // 进行typeof判断是否是object 不是就是基本类型 直接返回
    if(types !== 'object') {
        return type
    }
    // 返回类型
    return Object.prototype.toString.call(obj)
}

总结

• 今日份小知识get~