wangjie-fourth 的个人博客

may be just need work hard

目录
JS对象
/    

JS对象

基本概念

1、定义

无序的数据集合、键值对的集合。

2、写法

  • let obj = {'name':'frank', 'age':18}
  • let obj = new Object({'name':'frank'})
  • console.log({'name':'frank', 'age':18})

(1)下面代码是对象吗

{
    name:'demo'  
}

不是,对象的键必须是字符串。这个是label

3、注意

(1)对象的键名是字符串,不是标识符;有的时候,你写的不是字符串,但JS会帮你处理成字符串的。比如:

var a = {
    name : 'demo'  
}
// 这里虽然你看起来这个name不是字符串,但后期会把他作为字符串处理的
Object.keys(a)
// 输出结果是:["name"]

(2)对象键名的引号可以省略,但此时命名就得按标识符命名规则
(3)即使键名引号省略了,但键名依然是字符串

4、[]语法

使用 [ ]语法,那么 JS 会先求[ ]中表达式的值,注意区分表达式是变量还是常量。

  • 让变量的值作为键呢?
let a = 'xxx';
var obj = {
    a:111  
}
// 此时对象是:{"a":111},如何让键是变量值呢?这是ES6引入的新语法:[]
let a = 'xxx'
var obj = {
    [a]:111  
}
  • 使用symbol作为属性名
let a = Symbol();
let obj = { [a]: 'Hello' }

对象的隐藏属性:原型

JS中每一个对象都有一个隐藏属性__proto__,这个隐藏属性存储着共有属性组成的对象的地址。这个公有属性组成的对象叫做原型
所有对象的原型也有原型,其中Obejct原型的原型为null

对象属性的CURD

1、删除对象的属性

(1)让属性值为undefined

var obj = {name: 'frank', age: 18};
obj.name = undefined;
obj
// 此时结果是:{name:undefined, age:18}

(2)删除属性

var obj = {name: 'frank', age: 18};  
delete obj.name;// delete obj.['name']
obj
// 此时结果是:{age:18}
2、查询对象的属性

(1)查询对象的所有属性

Object.keys(obj)
Object.values(obj)  
Object.entries(obj)  

(2)查看对象自身属性 + 共有属性

console.dir(obj)

(3)判断一个属性是自身的还是共有的

obj.hasOwnProperty('toString');

(4)查看单独属性

  • obj['key']
  • obj.key
3、修改或增加对象的属性

(1)直接赋值

let obj = {name: 'frank'}
obj.name = 'frank';

(2)批量赋值

Object.assign(obj, {age: 18, gender: 'man'})

(3)修改原型属性(不推荐)

  • 直接在__proto__上修改
obj.__proto__.toString= 'xxx'
Object.prototype.toString = 'xxx'
  • 使用Object.create
// 以common为原型创建一个对象,赋给obj
let obj = Object.create(common)
4、判断对象上是否存在某个属性

(1)如何判断对象中是否含有属性

'属性名称' in 对象名称 === true

(2)如何判断对象含有属性名,但值为undefined

'xxx' in obj && obj.xxx === undefined

注意:obj.xxx === undefined不能断定xxx是否obj的属性


对象的构造函数

构造函数:用于生成对象的函数。

构造函数的由来

最笨的方式

假设我们想创建多个正方形,这里仅属性不同,函数是相同的。

let squareList = [];
let wdithList = [5,6,5,6,5,6];
for(let i = 0; i<6; i++){
    squareList[i] = {
        width: widthList[i];  
        getArea(){
            return this.width * this.width;  
        }  
        getLength(){
            return this.width * 4;  
        }
    }  
}

这种方式不仅不优雅,还会浪费太多内存。如下:
image.png

优化内存的方式

这里将公有属性放到原型,以节省内存。但是还是不够优雅

let squareList = [];
let wdithList = [5,6,5,6,5,6];
let squarePrototype = {
     getArea(){
        return this.width * this.width;  
     }  
     getLength(){
        return this.width * 4;  
     }
}
for(let i = 0; i<6; i++){
    squareList[i] = Object.create(squarePrototype);
    squareList[i].width = widthList[i];   
}

原型当中很重要得一个方法Object.create(原型对象),这似乎很常用。

提高代码复用性
let squareList = [];
let wdithList = [5,6,5,6,5,6];
  
function createSquare(width){
    let obj = Object.create(createSquare.squarePrototype);  
    obj.width = width;  
    return obj;  
}

createSquare.squarePrototype = {
    getArea(){
        return this.width * this.width;  
    }  
    getLength(){
        return this.width * 4;  
    }  
    constructor: createSquare  
}
for(let i = 0; i<6; i++){
    squareList[i] = createSquare(widthList[i]);
}

这样就解决了创建多个对象的问题。而这也是JS之父做的优化new

new背后的操作

在使用new创建对象时,我们可以使用以下代码来创建对象,来优化公有属性。

let squareList = [];
let widthList = [5,6,5,6,5,6];
  
function Square(width){ // 构造函数
    this.width = width;  
}
// 添加公有函数
Square.prototype.getArea = function(){
    return this.width * this.width;  
}
Square.prototype.getLength(){
    return this.width * 4;  
}

new关键字

当我们使用new来创建对象时,会发生以下四步:

  • 自动创建空对象;
  • 自动为空对象关联原型,原型地址指定为X.prototype
  • 自动将空对象作为this关键字运行构造函数;
  • 自动return this

如果一个函数不是构造函数,它依然拥有 prototype 属性,只不过这个属性暂时没什么用

1、JavaScript在设计函数的时候
规定创建一个函数时,其原型对象会存在constructor属性,其值等于本身
image.png
所以,要理解函数设计的时候,想让你把公有属性放到X.prototype;自己独特的属性放到X上;

class关键字

class语法是ES6新引入的语法。
1、模板代码

class Square{
	static x = 1;
	width = 0;
	constructor(width){
		this.width = width;
	}
	getArea(){
		return this.width * whis.width;
	}
	getLength: function(){
		return this.width *  4;
	}
	get area2(){//只读属性
		return this.width * this.width;
	}
}

相关参考资料:
https://zhuanlan.zhihu.com/p/35279244
https://zhuanlan.zhihu.com/p/23987456
https://www.zhihu.com/question/56770432/answer/315342130


数组对象

函数对象

根据


原型

1、原型
某一类公有属性组成的一个对象。
2、原型链
通过对象找到原型的路程,称为原型链。

一个对象的原型就是:

x.__proto__ === 其构造函数.prototype

只有Object.prototype.__protot__ === null

1、window是谁构造的
Window

通过window.constructor就可以知道

2、window.Object是谁构造的
window.Function,所有函数都是window.Function构造的

3、window.Function是谁构造的
window.Function,其实是游览器构造Function,然后让它指定自己的构造者是自己

评论