高级JS补环境框架-第一章

时间：2024-10-26 14:22:10

一、补环境框架流程

我们所说的 “补浏览器环境” 其实是补浏览器有 而Node没有的环境，即 补BOM和DOM的对象；

在这里插入图片描述

二、创建JS对象方式

// 1.直接变量创建
let a = {}
console.log(a);
// 2.通过new关键字
let b = new Object()
console.log(b);
// 3.通过()方法 // 注意create内部为原型链  如果填写Object 创建的为 Function对象
let c = Object.create(Object.prototype)
console.log(c);

let d = Object.create(Object)
console.log(d)

{}
{}         
{}         
Function {}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

三、原型链

当我们创建了一个新函数时，都会自动为该函数创建一个prototype属性，这个prototype属性是一个指针，指向这个函数的原型对象。而这个原型对象会自动创建一个constructor属性，constructor也是一个指针，指向prototype属性所在的那个函数，即我们创建的那个新函数。

// 我们使用dir(document) 发现document的最终原型(最终父类)为Object对象
  • 1
'
运行

在这里插入图片描述

  • 原型: 类
  • 原型对象: 类中属性与方法组成的一个对象
  • 实例对象: 创建的实例 
function User(){

}
// 原型对象:使用prototype指向的对象
User.prototype.name = "Guilty"
User.prototype.age = 18
User.prototype.login = function (login_name, login_pwd){
    console.log("success")
}
// 从原型到原型对象
console.log(User.prototype)
// 从原型对象到原型
console.log(User.prototype.constructor)
// 从原型到实例对象
let user  = new User()
user.login()
// 可以看到user为一个空对象，因为他是User的一个实例对象, 所以他有原型对象上的属性和方法
console.log(user)
// 从原型对象到实例对象
let user2 = new User.prototype.constructor();
console.log(user2)
// 从实例对象到原型对象
console.log(user.__proto__)
// 从实例对象到原型
console.log(user.__proto__.constructor);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
'
运行

四、call、apply、 arguments

function add(a, b){
    console.log(a + b)
}
add(1, 2)
// call 方法第一个参数是this指针, 即调用者, 第二个参数开始就是函数的实际参数
add.call(null, 2, 3)
// 与call不同的是，第二个参数为数组
add.apply(null, [3, 4])

// 如下，可以改变作用域
function info(weight){
    console.log(this.name, this.age, weight)
}
name = "XiaoHao"
age = 15
// 输出 XiaoHao 15
info()
// 更改作用域
let data = {
    "name": "Hello",
    "age": 18,
}
// 输出 Hello 18
info.call(data)
info.apply(data)
// arguments 类似于一个数组的对象,函数参数不确定时使用
function test_arg(){
    let data = {
        "name": "Hello",
        "age": 18,
    }
    info.apply(data, arguments)
}
test_arg(100)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

五、Object对象常用方法

// ()  :创建对象
// ()      :判断两个对象是否是同一个对象
// () : 对象自身属性中是否具有指定的属性
// (): 返回指定对象上一个自有属性对应的属性描述符。
// () 获取一个对象的所有自身属性的描述符。
// ()           获取实例对象的原型对象
// ()           方法设置一个指定的对象的原型
// ()           直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
//具体更详细的Object方法: /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
'
运行
//()
const object1 = {};

let temp = 150
Object.defineProperty(object1, 'property1', {
  get: function () {
      console.log("获取值");
      return temp
  },
  set: function (value){
      temp = value
      console.log("设置值");
  }
});

object1.property1 = 100
console.log(object1.property1);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

六、valueOf 和 toString 的区别

let a = {
    "toString": function (){
        console.log("调用了toString")
        return "toString"
    },
    "valueOf": function (){
        console.log("调用了valueOf")
        return "valueOf"
    }
}

console.log(+a) // 优先调用valueOf 没有情况下调用toString 因为是算数运算 +a 不是一个数值型 所以返回NaN
console.log(a + "") // 优先调用valueOf 没有情况下调用toString
console.log(`${a}`) // 仅调用valueOf
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
'
运行

七、判断对象类型

// typeof
// 

console.log("1", typeof "1") //string
console.log(1, typeof 1) //number
console.log(null, typeof null) //object -- 非正确
console.log(undefined, typeof undefined) //undefined
console.log([], typeof []) //object -- 非正确
console.log({}, typeof {}) //object -- 非正确
console.log(true, typeof true) //boolean
console.log(function (){}, typeof function (){}) //function

// 上述不正确类型，判断一般使用
console.log(null, Object.prototype.toString.call(null)) //[object Null]
console.log([], Object.prototype.toString.call([])) //[object Array]
console.log({}, Object.prototype.toString.call({})) //[object Object]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
'
运行

相关文章