对象
特性
封装性:隐藏细节,开放接口
继承性:继承另一个对象的成员
多态性:同一操作对不同对象,产生的结果不同
定义对象
var obj = {}
var obj = obj{
name:"zhangsan",
age:18,
}JSON
{
"name":"zhangsan",
"age":18
}访问对象成员
var obj = {
name:"zhangsan",
age:18
}
console.log(obj.name)
var introduce = function(){
console.log("my name")
}遍历对象
for ··· in
var obj ={
name:"zhangsan",
age:18
}
for(var k in obj){
console.log(k,obj[k])
}对象是否存在
var obj= {
name:"zhangsan",
age:18
}
console.log('name' in obj)
console.log('sex' in obj)深浅拷贝
浅拷贝:复制后相同,改一个变两个,节省内存
var obj ={
name:"zhangsan",
age:18
}
var obj2 = obj
obj2.name = "lisi"
console.log(obj === obj2)深拷贝:复制后不同,改一个不影响另一个
var obj ={
name:"zhangsan",
age:18
}
var obj2 = function(obj){
for(i in obj){
obj2[i] = obj[i]
}
}
obj2.name = "lisi"
console.log(obj === obj2)构造函数
构造函数:创建相同特征的对象
function factory(name,age){
var o = {}
o.name = name
o.age = age
}
o1 = factory("lisi",24)
o2 = factory("wangwu",25)
console.log(o1)
console.log(o2)类:
实例化:通过类创建对象的过程
内置构造函数:
{}.constructor
[native code]表示是原生代码
var obj = new Object()
var str = new String("123")
console.log(obj.constructor)
console.log(str.constructor)自定义构造函数
- 帕斯卡命名法:首写字母大写
- 使用this指向实例化对象
function Person(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log("Hello,my name is "+ this.name)
}
}
var p1 = new Person("zhangsan",18)
var p2 = new Person("lisi",20)
p1.sayHello()
console.log(p1)
p2.sayHello()
console.log(p2)class关键字
class Person{
constructor(name,age){
this.name = name
this.age = age
}
introduce(){
console.log('我是' + this.name + ',今年'+this.age + '岁')
}
}
var p = new Person("zhangsan",18)
p.introduce()
console.log(p)私有成员
私有成员:构造函数中用var定义的成员
function Person(){
var name = "zhangsan"
this.getName = function(){
return name
}
}
var p = new Person()
console.log(p.name)
console.log(p.getName())return 关键字
return + 基本类型 = 数据
return +引用类型 = 对象
//返回基本数据类型
function Person(){
obj =this
return 123
}
var obj,p= new Person()
console.log(obj === p)
//返回引用数据类型
function Person2(){
obj2 = this
return {}
}
var obj2,p2 = new Person2()
console.log(obj2 === p2)this
- 指向构造函数内部对象
- 直接调用函数调用全局对象
- 对象的方法,指向对象
function obj(){
return this
}
var o ={
name :"zhangsan",
function:obj
}
console.log(obj() == window)
console.log(o.function() === o)更改this指向
apply()
call()
function obj(){
console.log(this.name)
}
obj.apply({name:'张三'})
obj.call({name:'李四'})String对象
| 方法 | 解释 |
|---|---|
| length | 字符串长度 |
| charAt() | 从0开始获取字符位置 |
| indexOf() | 获取字符首次出现位置 |
| lastIndexOf() | 获取字符最后出现位置 |
| substr() | 按位置截取字符串 |
| substring() | 按长度截取字符串 |
| toLowerCase() | 转小写 |
| toUpperCase() | 转大写 |
| trim() | 去除首尾空格 |
| replace() | 替换字符串 |
| split() | 分割字符串 |
Number对象
| 方法 | 解释 |
|---|---|
| MAX_VALUE | 最大值 |
| MIN_VALUE | 最小值 |
| toFixed() | 保留小数位 |
date方法
| 方法 | 解释 |
|---|---|
| getFullYear() | 获取年份 |
| getMonth() | 获取月份 |
| getDate() | 获取日期 |
| getDay() | 获取星期 |
| getHours() | 获取小时 |
| getMinutes() | 获取分钟 |
| getSeconds() | 获取秒 |
| getTime() | 获取时间戳 |
| setFullYear() | 设置年份 |
| setMonth() | 设置月份 |
| setDate() | 设置日期 |
| setHours() | 设置小时 |
| setMinutes() | 设置分钟 |
| setSeconds() | 设置秒 |
| setTime() | 设置时间戳 |
Math对象
| 方法 | 解释 |
|---|---|
| random() | 随机数 |
| PI | 圆周率 |
| abs() | 绝对值 |
| ceil() | 向上取整 |
| floor() | 向下取整 |
| round() | 四舍五入 |
| max | 最大值 |
| min | 最小值 |
| pow(exp,base) | 指数 |
| sqrt(num) | 开方 |
错误处理
| 类型 | 说明 |
|---|---|
| Error | 普通错误 |
| EvalError | eval()函数错误 |
| RangeError | 超出范围错误 |
| ReferenceError | 引用不存在的变量 |
| SyntaxError | 解析过程语法错误 |
| TypeError | 变量或参数不是预期类型 |
try {
// 可能抛出错误的代码
} catch (error) {
// 错误发生时执行的代码
console.error('发生了一个错误:', error.message);
}finally
关闭文件流:在文件操作完成后,确保文件流被关闭。
释放数据库连接:在数据库操作完成后,释放连接资源。
清理内存:在处理完需要大量内存的数据后,清理不再需要的内存。
注销事件监听器:在组件卸载时,注销所有注册的事件监听器。
JSON
JSON.stringify() 方法
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
原型和继承
特性
封装性:隐藏细节,开放接口
继承性:继承另一个对象的成员
多态性:同一操作对不同对象,产生的结果不同
定义对象
var obj = {}
var obj = obj{
name:"zhangsan",
age:18,
}JSON
{
"name":"zhangsan",
"age":18
}访问对象成员
var obj = {
name:"zhangsan",
age:18
}
console.log(obj.name)
var introduce = function(){
console.log("my name")
}遍历对象
for ··· in
var obj ={
name:"zhangsan",
age:18
}
for(var k in obj){
console.log(k,obj[k])
}对象是否存在
var obj= {
name:"zhangsan",
age:18
}
console.log('name' in obj)
console.log('sex' in obj)深浅拷贝
浅拷贝:复制后相同,改一个变两个,节省内存
var obj ={
name:"zhangsan",
age:18
}
var obj2 = obj
obj2.name = "lisi"
console.log(obj === obj2)深拷贝:复制后不同,改一个不影响另一个
var obj ={
name:"zhangsan",
age:18
}
var obj2 = function(obj){
for(i in obj){
obj2[i] = obj[i]
}
}
obj2.name = "lisi"
console.log(obj === obj2)构造函数
构造函数:创建相同特征的对象
function factory(name,age){
var o = {}
o.name = name
o.age = age
}
o1 = factory("lisi",24)
o2 = factory("wangwu",25)
console.log(o1)
console.log(o2)类:
实例化:通过类创建对象的过程
内置构造函数:
{}.constructor
[native code]表示是原生代码
var obj = new Object()
var str = new String("123")
console.log(obj.constructor)
console.log(str.constructor)自定义构造函数
- 帕斯卡命名法:首写字母大写
- 使用this指向实例化对象
function Person(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log("Hello,my name is "+ this.name)
}
}
var p1 = new Person("zhangsan",18)
var p2 = new Person("lisi",20)
p1.sayHello()
console.log(p1)
p2.sayHello()
console.log(p2)class关键字
class Person{
constructor(name,age){
this.name = name
this.age = age
}
introduce(){
console.log('我是' + this.name + ',今年'+this.age + '岁')
}
}
var p = new Person("zhangsan",18)
p.introduce()
console.log(p)私有成员
私有成员:构造函数中用var定义的成员
function Person(){
var name = "zhangsan"
this.getName = function(){
return name
}
}
var p = new Person()
console.log(p.name)
console.log(p.getName())return 关键字
return + 基本类型 = 数据
return +引用类型 = 对象
//返回基本数据类型
function Person(){
obj =this
return 123
}
var obj,p= new Person()
console.log(obj === p)
//返回引用数据类型
function Person2(){
obj2 = this
return {}
}
var obj2,p2 = new Person2()
console.log(obj2 === p2)this
- 指向构造函数内部对象
- 直接调用函数调用全局对象
- 对象的方法,指向对象
function obj(){
return this
}
var o ={
name :"zhangsan",
function:obj
}
console.log(obj() == window)
console.log(o.function() === o)更改this指向
apply()
call()
function obj(){
console.log(this.name)
}
obj.apply({name:'张三'})
obj.call({name:'李四'})String对象
| 方法 | 解释 |
|---|---|
| length | 字符串长度 |
| charAt() | 从0开始获取字符位置 |
| indexOf() | 获取字符首次出现位置 |
| lastIndexOf() | 获取字符最后出现位置 |
| substr() | 按位置截取字符串 |
| substring() | 按长度截取字符串 |
| toLowerCase() | 转小写 |
| toUpperCase() | 转大写 |
| trim() | 去除首尾空格 |
| replace() | 替换字符串 |
| split() | 分割字符串 |
Number对象
| 方法 | 解释 |
|---|---|
| MAX_VALUE | 最大值 |
| MIN_VALUE | 最小值 |
| toFixed() | 保留小数位 |
date方法
| 方法 | 解释 |
|---|---|
| getFullYear() | 获取年份 |
| getMonth() | 获取月份 |
| getDate() | 获取日期 |
| getDay() | 获取星期 |
| getHours() | 获取小时 |
| getMinutes() | 获取分钟 |
| getSeconds() | 获取秒 |
| getTime() | 获取时间戳 |
| setFullYear() | 设置年份 |
| setMonth() | 设置月份 |
| setDate() | 设置日期 |
| setHours() | 设置小时 |
| setMinutes() | 设置分钟 |
| setSeconds() | 设置秒 |
| setTime() | 设置时间戳 |
Math对象
| 方法 | 解释 |
|---|---|
| random() | 随机数 |
| PI | 圆周率 |
| abs() | 绝对值 |
| ceil() | 向上取整 |
| floor() | 向下取整 |
| round() | 四舍五入 |
| max | 最大值 |
| min | 最小值 |
| pow(exp,base) | 指数 |
| sqrt(num) | 开方 |
错误处理
报错信息
语法错误
运行错误
常用语句
| 语句 | 功能 |
|---|---|
| alert() | 弹出对话框 |
| console.log() | 打印到控制台 |
| prompt() | 弹出对话框,返回用户输入的值 |
| confirm() | 弹出对话框,返回用户点击的按钮 |
| setInterval() | 定时器 |
| setTimeout() | 定时器 |
| document.write() | 向页面写入内容 |
| 类型 | 说明 |
|---|---|
| Error | 普通错误 |
| EvalError | eval()函数错误 |
| RangeError | 超出范围错误 |
| ReferenceError | 引用不存在的变量 |
| SyntaxError | 解析过程语法错误 |
| TypeError | 变量或参数不是预期类型 |
try {
// 可能抛出错误的代码
} catch (error) {
// 错误发生时执行的代码
console.error('发生了一个错误:', error.message);
}finally
关闭文件流:在文件操作完成后,确保文件流被关闭。
释放数据库连接:在数据库操作完成后,释放连接资源。
清理内存:在处理完需要大量内存的数据后,清理不再需要的内存。
注销事件监听器:在组件卸载时,注销所有注册的事件监听器。
JSON
JSON.stringify() 方法
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
深入理解原型链
允许对象间共享属性和方法
减少了代码的冗余
提高代码复用率和灵活性
基本概念
原型:每个函数都有一个prototype属性,就是原型
原型链
构造函数
原型对象:prototype属性指向的对象,就是原型对象
实例
什么是原型
运作机制
构造函数、原型与实例之间的关系
总结
- 可以通过原型链实现继
参考资料
- 浅析js中的原型和原型链及其使用场景_js原型链的应用场景-CSDN博客
- 一站搞定原型链:深入理解JavaScript的继承机制-腾讯云开发者社区-腾讯云
- 前端开发中的原型链:深入理解与图文解析_mb661f3315296a7的技术博客_51CTO博客
- 面试官:谈谈你对JavaScript原型链的理解 - 知乎
- 深入理解JavaScript原型链:从基础到进阶-阿里云开发者社区
方法
stringify( )
- 对象 -> 字符串
let book = {
title: "高级程序设计",
authors: "张三",
edition: 4,
year: 2025
}
let jsonText = JSON.stringify(book)
console.log(jsonText)
// {"title":"高级程序设计","authors":"张三","edition":4,"year":2025}parse( )
- 字符串 -> 对象
let jsonText = `{
"title": "高级程序设计",
"authors": "张三",
"edition": 4,
"year": 2025
}`;
let bookCopy = JSON.parse(jsonText)字符串转换
JSON.stringify()
const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"Alice","age":25}
const jsonString = '{"name":"Alice","age":25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Alice"
const jsonString = '{"name":"Alice","age":25}';
const obj = eval('(' + jsonString + ')'); // 必须用括号包裹
console.log(obj.name); // "Alice"
const jsonString = '{"name":"Alice","age":25}';
const obj = $.parseJSON(jsonString); // 效果同 JSON.parse
function stringify(obj) {
return `{${Object.entries(obj).map(([k, v]) => `"${k}":"${v}"`).join(',')}}`;
}
const obj = { name: "Alice", age: 25 };
console.log(stringify(obj)); // {"name":"Alice","age":"25"}(注意值强制转字符串)
function parse(str) {
return str.slice(1, -1).split(',').reduce((acc, pair) => {
const [k, v] = pair.split(':');
acc[k.replace(/"/g, '')] = v.replace(/"/g, '');
return acc;
}, {});
}
const jsonString = '{"name":"Alice","age":"25"}';
console.log(parse(jsonString)); // {name: "Alice", age: "25"}
const jsonString = '{"name":"Alice","age":25}';
const parseJson = (str) => new Function('return ' + str)();
const obj = parseJson(jsonString);
console.log(obj.name); // "Alice"特点
安全性:避免使用
eval()的安全风险。兼容性:所有现代浏览器和 Node.js 均支持。
参数扩展:
JSON.stringify(value, replacer?, space?)replacer:过滤或转换属性(函数或数组)。space:缩进美化(数字或字符串)。
JSON.parse(text, reviver?)reviver:解析时的值转换函数。
若字符串包含恶意代码(如
"alert('hack')"),会被直接执行。禁止用于解析外部或不可信的 JSON 数据。
与
JSON.parse()功能一致,但依赖 jQuery。不推荐在新项目中使用。
