JavaScript对象基础知识

简介: JavaScript对象基础知识

对象


为什么要有对象


function printPerson(name, age, sex....) {
}
// 函数的参数如果特别多的话,可以使用对象简化
function printPerson(person) {
  console.log(person.name); 
  ……
}


JavaScript中的对象


JavaScript中的对象其实就是生活中对象的一个抽象


JavaScript的对象是无序属性的集合。


其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对,其中值可以是数据和函数。


对象的行为和特征


特征---属性


行为---方法


  • 事物的特征在对象中用属性来表示。


  • 事物的行为在对象中用方法来表示。


对象字面量


字面量:11 ‘abc’ true [] {}等


var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};


思考:


如何把学生对象、老师对象、英雄对象改写成字面量的方式


对象创建方式


  • 对象字面量


var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};


  • new Object()创建对象


var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}


  • 工厂函数创建对象


function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('张三', 22, 'actor');


  • 自定义构造函数


function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
    console.log('Hello,everyBody');
  }
}
var p1 = new Person('张三', 22, 'actor');


属性和方法


如果一个变量属于一个对象所有,那么该变量就可以称之为该对象的一个属性,属性一般是名词,用来描述事物的特征
如果一个函数属于一个对象所有,那么该函数就可以称之为该对象的一个方法,方法是动词,描述事物的行为和功能


new关键字


构造函数 ,是一种特殊的函数。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。


  1. 构造函数用于创建一类对象,首字母要大写。


  1. 构造函数要和new一起使用才有意义。


new在执行时会做四件事情


new会在内存中创建一个新的空对象
new 会让this指向这个新的对象
执行构造函数  目的:给这个新对象加属性和方法
new会返回这个新对象


this详解


JavaScript中的this指向问题,有时候会让人难以捉摸,随着学习的深入,我们可以逐渐了解


现在我们需要掌握函数内部的this几个特点


  1. 函数在定义的时候this是不确定的,只有在调用的时候才可以确定


  1. 一般函数直接执行,内部this指向全局window


  1. 函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象


  1. 构造函数中的this其实是一个隐式对象,类似一个初始化的模型,所有方法和属性都挂载到了这个隐式对象身上,后续通过new关键字来调用,从而实现实例化


设置和获取属性值的另一种方法


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
  <script>
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.play=function () {
          console.log("喜欢玩游戏");
      };
    }
    var obj=new Person("卡卡西",20);
    //obj.name="佐助";
    obj["name"]="佐助";
    console.log(obj["name"]);
    obj.play();
    obj["play"]();
   // console.log(obj.name);
//    console.log(obj.age);
//    obj.play();
  </script>
</head>
<body>
</body>
</html>
相关文章
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
161 2
|
11月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
6月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
189 23
|
11月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
11月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
163 1
JavaScript中对象的数据拷贝
|
11月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
123 4
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
233 2
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
164 1
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
107 2