稳扎稳打JS——“对象”
时间:2022-05-03
本文章向大家介绍稳扎稳打JS——“对象”,主要内容包括一切皆“对象”、对象都是由函数创建的、每个函数都有prototype属性、所有对象都有proto属性、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一切皆“对象”
- JS中一切皆“对象”
- “对象”是属性的集合,而属性又是对象。既然属性又是对象,那么一个对象的属性也可以拥有属性,如:
//定义一个函数getName
var getName = function(){
return "chaiMaoMao";
}
//由于一切皆对象,故getName也为对象,故可以给它添加属性,属性可以是任何类型
getName.value = "lalala";
getName.toString = function(){
//……
}
- JS中的“对象”只有属性,属性是一组键值对,键表示属性的名字,值表示属性值,属性值可以是任何JS类型(String、Number、Boolean、Object、Array、Function)
- JS是“基于对象”语言,这意味着它并不是面向对象语言,它没有对象,但可以使用JS的特性模拟面向对象。
- JQuery中的$其实是是一个函数,我们常看到的$(“#id”)其实是调用函数$,并传递参数 “#id”。
- JQuery为函数还定义了一些属性,如还定义了一些属性,如.trim();
对象都是由函数创建的
- JS中所有对象都由函数创建
//通过构造函数创建对象
var person = new Person();
//使用JSON创建对象
var person = {
name : "chaiMaoMao",
age : 12
}
//JSON创建对象是一种语法糖,该过程相当于
var person = new Object();
person.name = "chaiMaoMao";
person.age = 12;
//创建数组
var array = [1,2,3,4];
//该过程实则为:
var array = new Array(1,2,3,4);
//定义一个数字
var a = 3;
//该过程实则为:
var a = new Number(3);
//定义一个函数
var getName = function(){
//……
}
//该过程实则为:
var getName = new Function();
由此可见,所有对象都是由函数创建的!
每个函数都有prototype属性
- prototype属性用于存储函数的属性集合。
- 初始情况下,一个函数的prototype属性中只含有一个constructor对象,指向函数本身。
- 存储在函数中的属性值和存储在函数prototype属性中的属性值均能访问,并且访问方式相同,如下:
//定义一个函数Person(属性值存储在函数中)
var Person = function(){
//……
}
Person.name = "chaimm";
Person.getName = function(){
//……
}
//访问函数中的属性
var p = new Person();
p.name;
p.getName();
//定义一个函数Perosn(属性值存储在函数的prototype属性中)
var Person = function(){
//……
}
Person.prototype.name = "chaimm";
Person.prototype.getName = function(){
//……
}
//访问函数prototype中的属性
var p = new Person();
p.name;
p.getName();
由此可见,访问存储在函数prototype中的属性和访问存储在函数中的属性的方式是一样的。 虽然访问方式一样,但两者存在巨大的差别。
- 当通过函数创建对象时,对象所有的属性值将会被复制给新的对象。但由于prototype是一个引用类型的变量,存储的是对象的地址,因此prototype中的所有属性值将会被该函数创建的所有对象共享,若一个对象修改了prototype中的某个属性,那所有对象prototype属性都会发生修改。 因此,prototype属性适合存储不变的属性,如函数;函数的普通属性适合存储基本类型类型的属性;而对象无论存储在哪里效果都一样。
- 此外,将函数存储在prototype中可以达到节约内存的功效,不论创建多少对象,该对象的函数在内存中只有一份。但若将函数存在构造函数的属性中,那么每次new一个对象,都会拷贝一份函数体,从而造成浪费。
所有对象都有proto属性
- 所有对象都有私有属性proto,它指向创建该对象的构造函数的prototype属性。
- JS中所有属性都是共有的,但有个约定,若属性两端加上“_”,表示该属性不希望调用者使用,相当于是“私有属性”。
- 通过Object创建的对象的proto属性指向Object.prototype
var p = new Object();
- 通过构造函数创建的对象的proto属性指向该函数的prototype属性
var p = new Person();
- 所有的函数均由Function创建,因此函数的proto属性指向Function.prototype。
- Function.prototype._proto_ === Object.prototype Function.prototype本身也是个对象,它的_proto_属性指向Object.prototype。
- Object._proto_ === Function.prototype Object是一个构造函数,既然是函数,那么它的_proto_指向Function.prototype
- Objecet.prototype._proto_ === NULL
- Function._proto_ === Function.prototype Function的_proto_指向创建Function的函数的prototype,Function由它自己创建。
- 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)
- Go语言学习之cgo(golang与C语言相互调用)
- golang之旅--数据类型之字符串
- Android保存图片到系统图库
- 基于Vue.js的大型报告页项目实现过程及问题总结(二)
- 使用Hexo搭建专属Blog
- Android项目中文字乱码问题
- golang中发送http请求的几种常见情况
- 注册中心 Eureka 源码解析 —— Eureka-Server 启动(一)之 ServerConfig
- lua表排序
- Go语言-base64使用
- Gitcafe绑定自定义域名
- 【死磕Java并发】—- J.U.C之并发工具类:CyclicBarrier
- Android Studio快捷键
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Hadoop框架:集群模式下分布式环境搭建
- 微服务 Hystrix 实现服务熔断
- 微服务 Gateway 的基本配置
- 有赞营销逆向域的探索与实践
- RabbitMQ 启动报错:Error: unable to perform an operation on node ‘rabbit@***‘. Please see diagnostics...
- MySQL|查询字段数量多少对查询效率的影响
- 如果MySQL事务中发生了网络异常?
- MySQL|update字段为相同的值是否会记录binlog
- 微服务配置 Config 与消息总线
- 贷款违约预测-Task5 模型融合
- Python字符串
- MYSQL logstash 同步数据到es的几种方案对比以及每种方案数据丢失原因分析。
- 手写“SpringBoot”:几十行代码基于Netty搭建一个 HTTP Server
- SpringCloud Sleuth 分布式请求链路追踪
- StarUML 使用方法