JavaScript语言精粹之对象

编程入门 行业动态 更新时间:2024-10-24 06:26:41

JavaScript语言<a href=https://www.elefans.com/category/jswz/34/1706711.html style=精粹之对象"/>

JavaScript语言精粹之对象

  1. 基本知识

JavaScript的简单类型包括
数字 number (两个浮点数相加 精度不够 0.1+0.2!=0.3)
字符串 string
布尔值 boolean.
null
undefined
以上都是简单数据类型
Object 为引用类型
除以上6中之外ES6还新增了Symbol类型,Symbol不是对象,属于原始类型,所以不能用new 创建。

并且js中的简单类型都保存在栈中,而引用类型保存在堆中

2.疑问与解答

相对与其他语言js的基本类型貌似可以调用属性,方法。
例如:

let str='Dyx'
console.log(str.length);//3
console.log(str.small);//[Function:sup]

不是只有引用类型才有方法吗,为什么基本类型也可以调用方法和属性?

这是因为js中除了常见的引用类型(function,array,正则表达式)之外还有
一种特殊的引用类型 —包装类(String,Number,String)

其实str作为基本类型,是没有属性和方法的,但是String包装类有 console.log(str.length);执行时,String会根据str创建一个String的实列对象,
再把这个对象的length属性进行输出。

在看一个例子

let b='mm';
console.log(b.name);//undefind

对照两个列就能更好地说明,基本类型并没有属性,只是包装类对他们进行了包装

  • 通过对象字面量创建对象

     一个对象字面量就是包围在一对{}里面的多个或零个键值对
    
	let stu1={};let stu2={name : 'djh',age : 20"1323" : 2,"" : 0}
我们可以注意到如果属性名不合法我们可以用""括住属性名
且属性名可以是包含空字符串在内的任何字符串
  • 对象的检索

     在js中可以通过以下两种方式来检索对象中的元素1.对于服从命名规范的属性可以直接使用  对象名.属性名进行访问,也可以使用   对象名[属性名]。2.对于服从命名规范的属性只能使用   对象名[属性名]进行访问。
    
	console.log(stu2[""]);console.log(stu2["1323"]);console.log(stu2.age);
  • 通过构造函数创建对象(这里我们将插入原型的概念)
	function students(){}let stu1= new students();let stu2 =new students();
	原型对象:当你声明一个函数的时候,浏览器会自动创建一个原型对象,并且这个原型对象可以通过 函数名.prototype访问到,原型对象中也有一个constructor属性访问到students,并且这个propotype属性是函数的固有属性无法删除。
	console.log(students.prototype)//{}console.log(students.prototype.constructor===students)//tureconsole.log(delete students.prototype);//false
	当你用students创建出一个stu1对象是,stu1有一个__proto__属性可以访问到原型且原型中的属性被所有由同一个构造函数创建的对象共享。当对象与原型中存在相同的属性时,原型的属性则会被屏蔽掉。
	students.prototype.age='20';console.log(stu1.age);//20console.log(stu2.age);//20stu1.age='10';console.log(stu1.age);//10
  • Delete
    在js中访问对象中没有的元素时,会沿原型链从他们中的原型寻找该属性
    直到Object.propotype,如果获取不到则返回 undefined
    删除对象中元素时则不会触及原型链

  • 引用
    浅拷贝:仅仅复制对象的引用,而不是对象本身
    深拷贝:把复制的对象所引用的全部对象都复制一遍,也就是说变量指向的是 一个新的对象。

     给大家介绍几种深拷贝的方法
    
console.log('深拷贝方法1:...')let dyx={n :1,m :2
}
let dyx1 = {...dyx};
dyx.n=2;
console.log(dyx.n);
console.log(dyx1.n);
console.log(dyx==dyx1);//trueconsole.log('深拷贝方法2:assign()')let dyx4=Object.assign({},dyx);//Object.assign()拷贝的是属性值,当源对象中有引用属性时,copy的只是引用值。
console.log(dyx4);
console.log(dyx4==dyx);//trueconsole.log('深拷贝方法3-递归遍历法');let obj = {a:{b:10}};
function deepCopy(obj){if ( typeof obj != 'object' ){ // ( obj  instanceof Object || obj  instanceof Array )return obj;}var newobj = {};for ( var attr in obj) {newobj[attr] = deepCopy(obj[attr]);}return newobj;
}
var obj2 = deepCopy(obj);
obj2.a.b = 20;
console.log(obj.a.b); //10
console.log(obj2==obj);//tureconsole.log('浅拷贝');let dyx3=dyx;
console.log(dyx3.m);
dyx.m=1
console.log(dyx3.m);
console.log(dyx==dyx3);//ture

更多推荐

JavaScript语言精粹之对象

本文发布于:2024-02-14 11:08:15,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1763271.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:精粹   对象   语言   JavaScript

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!