导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

示例

var teacher = {
	name: 'zhangsan',
  age: 32,
  sex: 'male',
  teach: function() {
  	console.log('I am teaching js');
  },
  smoke: function() {
    this.age--;
  	console.log('I am smoking');
  },
  eat: function(){
    this.age++;
  	console.log('I am having a dinner');
  }
}

// 查询属性
teacher.name;
teacher.teach();

// 新增属性
teacher.address = '北京';
teacher.drunk = function() {};

// 修改属性
teacher.age = 20;
teacher.eat = function() {};

// 删除属性
delete teacher.age;
delete teacher.teach;

var attendance = {
	students: [],
  join: function(name) {
  	this.students.push(name);
    console.log(this.students);
  },
  leave: function(name) {
    var idx = this.students.indexOf(name);
    if(idx !== -1){
    	this.students.splice(idx, 1);
    }
  }
}

创建方法

• var obj = {}
• var obj = new Object()

原型也是对象，原型的原型由 Object 构造而来

function Obj() {}
var obj = new Obj();

console.log(obj.__proto__ === Obj.prototype); // true
console.log(obj.__proto__.__proto__ === Object.prototype); // true
console.dir(obj.__proto__);

new 做了什么

• 创建一个新对象：
  • 创建一个新的空对象，并将其作为函数的上下文（this）对象。
• 设置原型链：
  • 将新对象的原型（__proto__）设置为构造函数的 prototype 属性。这样，新对象就可以访问构造函数原型上的属性和方法。
• 执行构造函数：
  • 使用新对象作为 this 执行构造函数代码。构造函数中的代码可以对新对象进行初始化操作，例如添加属性和方法。
• 返回新对象：
  • 如果构造函数显式地返回一个对象，那么 new 表达式会返回这个对象。
  • 如果构造函数没有显式地返回对象，则 new 表达式会返回步骤 1 中创建的新对象。

自己实现一个简化版的 new 操作符

function myNew(constructor, ...args) {
  // 创建一个新对象，并将其原型指向构造函数的 prototype
  const newObject = Object.create(constructor.prototype);
  
  // 使用新对象作为 this 执行构造函数
  const result = constructor.apply(newObject, args);
  
  // 如果构造函数显式返回了一个对象，则返回该对象，否则返回新创建的对象
  return (result && typeof result === 'object') ? result : newObject;
}

// 使用 myNew 创建 Person 对象
const person2 = myNew(Person, 'Bob', 25);
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.

总结

new 操作符在 JavaScript 中主要用于创建并初始化新对象。它的主要作用是：

• 创建一个新对象。
• 将新对象的原型指向构造函数的 prototype。
• 使用新对象作为 this 执行构造函数。
• 返回新对象（或者构造函数显式返回的对象）。

不是所有对象都继承自 Object.prototype ，Object.create(null) 不继承

var obj1 = Object.create(null);
console.log(obj1);
obj1.num = 1;
var obj2 = Object.create(obj1);
console.log(obj2);
console.log(obj2.num);

toString()

• undefined, null 没有 toString 方法
• number 有 toString 是因为包装类

var num = 1;
num.toString(); // new Number(1) ->> toString()
var num2 = new Number(num);
console.log(num2);

⭐️ document.write 会把内容转为字符串打印出来

var num = 1;
var obj = {};
var obj2 = Object.create(null);

document.write(num); // 1
document.write(obj); // [object Object]
document.write(obj2); // 报错，obj2 没有继承原型的toString方法

obj2.toString = function() {
	return '123'
}
document.write(obj2.toString()); // 123

⭐️ toString 的重写

Object.prototype.toString.call(1)
"[object Number]"
 Object.prototype.toString.call('1')
"[object String]"
 Object.prototype.toString.call(true)
"[object Boolean]"
 Object.prototype.toString.call([1, 2, 3])
"[object Array]"
 Object.prototype.toString.call({})
"[object Object]"

Number.prototype.toString.call(1); // 字符串 1

call/apply 更改 this 指向

⭐️ 调用函数，隐式调用了 call

function test() {
	console.log(1);
}
test(); // -->> test.call() 调用函数时，系统隐式的加了 .call

function Car(brand, color) {
	this.brand = brand;
  this.color = color;
}

var newCar = {};
Car.call(newCar, 'Benz', 'red');
Car.apply(newCar, ['Benz', 'red']);
console.log(newCar);

function Compute() {
	this.plus = function(a, b) {
  	console.log(a + b);
  }
  this.minus = function(a, b) {
  	console.log(a - b);
  }
}
function FullCompute() {
	Compute.apply(this);
  this.mul = function(a, b) {
  	console.log(a * b);
  }
  this.div = function(a, b) {
  	console.log(a / b);
  }
}
var compute = new FullCompute();
compute.plus(1, 2);
compute.minus(1, 2);
compute.mul(1, 2);
compute.div(1, 2);

对象相等问题

问空对象 {} == {} 等不等于，为什么不等于，如何才能使其等于

答：

1. 不等于
2. 因为引用值之间比较的是地址，而两个空对象分别存储在不同的堆中，地址不同，指针指向不同。
3. var obj = {}; obj1 = obj; obj == obj1