JavaScript基础系列(五)

---

theme: scrolls-light

highlight: a11y-dark

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

原型 prototype

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

js function fn(){} console.log(fn.prototype) // 输出原型对象 // constructor: ƒ fn1() // [[Prototype]]: Object - 设置原型 通过Object.setPrototypeOf

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

原型链

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

继承

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

this的指向

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

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

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

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

  ```js 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 可以使用===来判断

js 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" - 判断一个变量是否存在

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

instanceof

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

```js 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 类型]的字符串
• 使用方式

js let toString = Object.prototype.toString toString.call(1) // '[object Number]' toString.call(true) // '[object Boolean]' toString.call(window) // '[object Window]' - 实现一个全局通用数据类型判断方法

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

总结

• 今日份小知识get~