一、引言

  前面我们介绍了有关于内置对象的很多很多的API,讲道理得话如果想彻底的掌握那一定要经过一定的代码段沉淀下。大家可以想象一下,既然在程序中有很多的内置对象供我们使用,那我们是不是也可以定义一些对象作为我们自己的特用对象呢?答案肯定是可以的。

二、导入

  在工作中根据内容需求不同我们可以定义不同的对象来实现我们自己想要的功能。

三、重点内容

  ① 自定义对象的概念:

    在工作当中,有时我们需要多次的定义不同事物的不同属性。这个时候为了方便我们就有了对象把他们封装起来。那么对象是什么呢?。它是一个无序数组的集合,你可以把它当做是你的旅行包,里面装着你的衣服、钱包、手机等的物品。对象可以帮我们封装一些数据,方便我们在程序中的传输或者是控制。我们把在对象中封装的内容就把这些叫做是属性或者方法。

    属性:事物具有的特征

    方法:事物具有的行为

  ② 自定义对象的创建方式:

    1.创建自定义对象:

  var student = new Object();  //创建了一个学生的空对象
// 属性(特征,姓名,性别,年龄,手机号,家庭)和方法(打招呼,游泳,打球)
student.name = "张三";
student.sex = "男";
student.age = ;
student.sayHi = function (){
console.log("我叫"+student.name+",我今年"+student.age+",我是"+student.sex+"生");
};

     虽然这样做是没有错误的,但是如果说是要储存一个班的人的信息呢?我们需要一个方式批量创建。

    2. 利用函数批量的创建对象

function  createStudent(name,age,sex){
var student = new Object();// 用构造函数的方式创建了一个空对象并返回
student.name =name;
student.age = age;
student.sex= sex;
student.sayHi= function(){
console.log("我叫"+student.name+",我今年"+student.age+",我是"+student.sex+"生");
};
return student;//将这个对象返回
} var zs = createStudent("张三",,"男");
zs.sayHi(); var ls = createStudent("李四",,"男");
ls.sayHi();
var zs1 = createStudent("赵四",,"男");
zs1.sayHi();

      这样子我们就可以批量的穿件对象了,但是在上面的代码中我们发现 var student = new Object();// 用构造函数的方式创建了一个空对象并返回   return student;//将这个对象返回   这两句是不必须的,所以我们用下面的方法。

     3.构造函数创建对象

function Student(name,sex,age){  //首字母大写,标明是一个函数,但是是构造函数,用来创建对象
//var this = new Object();
this.name = name; // this指代当前创建出来的出来
this.age=age;
this.sex = sex;
this.sayHi = function(){
console.log("我叫"+this.name+",我今年"+this.age+",我是"+this.sex+"生");
};
//return student();
// return this;
} var ls = new Student("李四","男",); // 构造函数可以创建对象并返回
ls.sayHi(); var xm = new Student("小明","男",);
xm.sayHi(); //谁调用,this就指代谁,始终指向当前对象

    在这里面我们需要关注两个关注的关键字new与this

      new在构造函数的时候做了以下的4件事

        a ) 创建一个空的对象。   

        b )将this指针指向这个对象。

        c )将构造函数里面的代码,给当前空对象this设置属性和方法。

        d )将this这个当前这个对象返回。

      this

       在JS中,通过构造函数创建出来的对象 ,在调用方法的时候,this指代当前对象。

       谁调用方法,this指代谁,都是指代当前对象。

    我知道关于这两个关键字肯定还有更深层的解释,不过这是基础先掌握后面再深入。

    4.对象字面量创建对象

var o = {    // 对象字面量
name:"张三",
age:,
address:"上海市",
sex:"男",
sayHi:function(){
console.log("大家好,我的名字是:"+ this.name+",我的年龄是:"+ this.age+",我是"+ this.sex+"生");
}
};
o.sayHi();

四、总结

  今天的内容有些多,需要记忆的内容要求很大。希望大家可以多多记忆。

												

JavaScript 基础第六天的更多相关文章

  1. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  2. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  3. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  4. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  9. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

随机推荐

  1. Web应用定时任务实现

    一.需求: 项目上有时需要执行一些定时任务,比如:超过2天未处理的问题,邮件自动通知客服.对接人:3天未处理的问题,邮件自动通知客服.对接人和项目经理,同时标为‘紧急’状态:5天未处理的问题,邮件自动 ...

  2. form表单里如果只存在一个文本框,enter键提交

    在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...

  3. Spring环境搭建之:导入jar包、配置文件名称及放置位置

    Spring环境搭建之:导入jar包.配置文件名称及放置位置 现在项目开发中spring框架应用的还是比较多的,自己用的还不太熟练,每次用的时候总配置半天,总有些配置弄错,就找个时间总结以下,方便以后 ...

  4. 炼数成金(dataguru)IT技能修炼

    2016我定的目标就是要走出舒适区,进入学习区!为了少走弯路,节约学习的成本和时间,我选择了dataguru.看到心仪的课程毫不犹豫的就报了名. 分享了炼数成金邀请码,使用邀请码报名课程可以减免50% ...

  5. java 集合知识整理

    java集合类图 HashMap和Hashtable的区别   HashMap HashTable  继承方式 extends AbstractMap implements Map extends D ...

  6. 沉浸式状态栏_boolean hasTopLine = a.getBoolean(1, false);//AS会在"1"下显示错误红线

    TypedArray a = mContext.obtainStyledAttributes(attrs); boolean hasBottomLine = a.getBoolean(0, false ...

  7. tkinter 在 x window 下的字体设置格式

    X Font Descriptors # X Font Descriptors are strings having the following format (the asterisks repre ...

  8. sublime text3 less2css rem

    1.下载sublime text3 官网地址:https://www.baidu.com/link?url=2kr0ijQXVL1_6oXdPByYh7ecMl7OUAYVx5fyTNjMrYVdtq ...

  9. pycharm 下载与配置

    https://www.jetbrains.com/pycharm/download/

  10. SEO是企业发展的永恒主题

    最近接触很多客户问同一个问题,明明自己的网站花的时间很多,界面设计的很美,该考虑到的优化都考虑了,反而我那么优秀的网站却不如一个自己行业里的一个垃圾网站排名高,我没排名而对方的排名却很高?我每天坚持更 ...