js中的对象学习笔记(一)

简介: js中的对象学习笔记

一、object类型

{
k : v,
k : v,
k : v,
k : v   <-----注意这里最后一个没有逗号很容易出错!!!格式严谨!!!
}


JSON要比对象字面量,要严格,严格在哪儿呢?就是所有的k,必须加引号。


JSON:


{
"k" : v,
"k" : v,
"k" : v,
"k" : v
}

但是,下面的特殊情况,这个k必须加引号:


k是特殊字符


k是数字


k是有空格


k是关键字、保留字


先说一下,上面这些情况,也同时不能使用点语法来访问属性了,比如使用方括号:

var obj = {
name : "考拉"
}
console.log(obj["name"]);

特殊形式的k,必须要加上引号,检索属性的时候,必须用方括号:


var obj = {
"24&*$&#@@)@!" : "哈哈",
"all name" : "考拉",
"++++%%%%" : "嘻嘻",
"var" : "么么哒",
"function" : "嘻嘻"
}
console.log(obj["24&*$&#@@)@!"]);
console.log(obj["all name"]);
console.log(obj["++++%%%%"]);
console.log(obj["var"]);
console.log(obj["function"]);

对象的属性的访问,点语法是有局限的,它不能访问上面的特殊的那些情况。也不能访问以变量保存的k:

var obj = {
name : "考拉",
age : 18,
sex : "男",
"study score" : 100
}
//console.log(obj."study score");//错误的
console.log(obj["study score"]); //正确的
console.log(obj["a" + "ge"]); //正确的
var a = "sex";
console.log(obj[a]); //正确的
</script>


1.var obj = new Object(); //这是一个空对象,里面没有任何属性

var obj = {
name : "考拉",
age : 18,
sex : "男"
};

构造函数方式:

var obj = new Object();
obj.name = "考拉";
obj.age = 18;
obj.sex = "男";

二、对象的方法


当一个对象的属性的值,是一个函数,那么这个函数我们就称为对象的“方法”(method)。


方法就是一个对象能够做的事情,一般来说,就是一个动词。比如小明打招呼、长大、变性方法。

var xiaoming = {
name : "小明",
age : 18,
sex : "男",
sayHello : function(){
alert("你好,我是" + this.name);
alert("今年" + this.age + "岁了");
alert("我是可爱的小" + this.sex + "生");
}
}
xiaoming.sayHello();


一个对象,方法函数里面的this指的是这个对象。


构造函数

注意,我们学习Java、C++、C#语言的惯例,构造函数以大写字母开头。

function People(){
}

JavaScript规定,一个函数可以用new关键字来调用。那么此时将按顺序发生四件事情:


1)隐秘的创建一个新的空对象


2)将这个函数里面的this绑定到刚才创建隐秘新对象上


3)执行函数体里面的语句


4)返回这个新的对象


我们称呼这个函数,叫做构造函数,一般的,构造函数用大写字母开头。也叫作People“类”。


我们称呼xiaoming这个对象是People类的实例。


当一个函数用()调用的时候,this就是window


当一个函数用对象方法调用的时候,this就是这个对象


当一个函数绑定给一个HTML元素事件的时候,this就是这个HTML元素


当一个函数用定时器调用的时候,this就是window


当一个函数用apply、call调用的时候,this就是你指定这个东西


当一个函数用new调用的时候,this就是隐秘创建的空对象,函数里面的语句将被执行,并且返回新对象


1.People.prototype = {
name : "考拉",
sex : "男",
age : 18
}

1.People.prototype.name=”考拉”

两种赋值方法

//构造函数,构造函数里面没有任何语句,也就是说,这个构造函数在执行的时候,不会给创建出来的对象添加任何属性。
function People(){
}
//构造函数的原型,我们更改了构造函数的原型,为一个新的对象:
People.prototype = {
name : "考拉",
sex : "男",
age : 18
}
//当一个对象被new出来的时候,不仅仅执行了构造函数里面的语句,也会把这个函数的__proto__指向构造函数的prototype。
var xiaoming = new People();
console.log(xiaoming.__proto__);
console.log(xiaoming.__proto__ == People.prototype);
//当我们试图访问name、sex、age属性的时候,身上没有。那么就去查找原型,原型身上有,就当做了自己的属性返回了。说明给原型对象加了属性以后 构造函数身上却没有这个属性
console.log(xiaoming.name);
console.log(xiaoming.sex);
console.log(xiaoming.age);


通过构造函数出来的对象给原型对象加属性以后,后面通过构造函数构造的对象都有这个原型对象的属性

image.png

当我们试图访问一个对象身上的属性的时候,如果这个对象身上有这个属性,则返回它的值。如果它身上没有这个属性,那么将访问它的原型对象,检测它的原型对象身上是否有这个值,如果有返回它原型对象身上的这个值。


4.2 原型的用途

我们定义一个方法的时候,如果写在构造函数里面:

function People(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
alert("你好,我是" + this.name + "我今年" + this.age + "岁了");
}
}
var xiaoming = new People("小明",12);
var xiaohong = new People("小红",11);
xiaoming.sayHello();
xiaohong.sayHello();


实际上这个函数被复制了两份,一份给了xiaoming,一份给了xiaohong。xiaoming和xiaohong这两个实例身上有了相同功能的函数,但是这个函数不是同一个函数!


而函数天生要被复用,你没有复用函数:

alert(xiaoming.sayHello == xiaohong.sayHello); //false

xiaoming身上的函数,和xiaohong身上的函数,不是同一个函数。


那应该怎么办呢?一句话:所有的属性要绑在对象身上,而所有的方法,定义在对象的原型对象中:

function People(name,age){
//构造函数里面,负责定义一些属性,随着构造函数的执行,这些属性将绑定到new出来的对象身上
this.name = name;
this.age = age;
}
//把所有的方法,定义在原型对象身上:
People.prototype.sayHello = function(){
alert("你好,我是" + this.name + "我今年" + this.age + "岁了");
}

image.png

alert(xiaoming.sayHello == xiaohong.sayHello);

image.png

证明了xiaoming的sayHello方法和xiaohong的,是同一个函数。内存消耗小很多。

People.prototype.constructor //指向构造函数


目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
39 2
|
10天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
13天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
13天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
1月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
37 4
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
25 2
|
1月前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
18 3
|
1月前
|
JavaScript 前端开发
JavaScript Math(算数) 对象
JavaScript Math(算数) 对象
20 4