六. 面向对象

对象属于一种复合的数据类型,在对象中可以保存多个不同的数据类型的属性。

对象分类

  1. 内建对象

    • 由ES标准种定义的对象。比如:Math String Number
  2. 宿主对象
    • 由JS的运行环境提供的对象,主要指由浏览器提供的对象。比如:BOM DOM
  3. 自定义对象
    • 开发人员创建的对象

创建对象的三种方式

使用new关键字,调用对象的构造函数。

var obj = new Object();
var obj = {}; // 对象字面量创建
var obj = {name:"tom", age=12}; // 使用对象字面量可以在创建时指定对象的属性

添加属性

对象的属性名不强制要求遵守标识符的规范。

尽量按照标识符规范去做。

obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18;
obj["123"] = 789; // 特殊属性名,使用[]形式操作
// 使用[]方式操作属性更加灵活
ver n = 'name';
console.log(obj[n]);

JS对象的属性值,可以是任意的数据类型,甚至可以是一个对象。

删除属性

delete obj.name;

in 运算符

通过该运算符可以检查一个对象中是否含有指定的属性

堆栈

JS中的基本数据类型的值都是直接在栈内存中存储的,值与值之间是独立存在,修改一个变量不影响其他变量。

引用类型是保存在堆内存中的,栈内存中仅保留该类型在堆内存中的地址信息,修改一个变量时会影响其他变量。

当比较两个基本数据类型的值时,就是比较值,而比较两个应用数据类型的值时,是比较对象的内存地址。

访问对象属性

您能够以两种方式访问属性:

objectName.propertyName
objectName["propertyName"]

请不要把字符串、数值和布尔值声明为对象!

如果通过关键词 "new" 来声明 JavaScript 变量,则该变量会被创建为对象:

var x = new String();        // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

枚举对象中的属性

for ... in ... 语句 对象有几个属性,循环体就会执行几次

for(var n in obj){
console.log(n);
m = console.log(obj[n]);
}
// n 为对象的 Key
// m 为对象的 value

作用域

作用域指一个变量的作用范围

JS中一共有两种作用域:

  1. 全局作用域

    • 直接编写在script标签中的 JS 代码,都在全局作用域
    • 全局作用域在页面打开时创建,在页面关闭时销毁
    • 在全局作用域中有一个全局对象window,代表一个浏览器的窗口,由浏览器创建,我们可以直接使用
    • 在全局作用域中 创建的所有变量都会作为 window 对象的属性保存
    • 创建的所有函数都会作为 window 对象的方法
    • 全局作用域中的变量都是全局变量,在任何页面都可以访问的到
  2. 函数作用域
    • 调用函数时,创建函数作用域,函数执行完毕后,作用域销毁
    • 每调用一次函数,就会创建一个新的函数作用域,他们之间是相互独立的
    • 在函数作用域中可以访问到全局作用域的变量

当函数和全局存在同名变量时,对于该变量的访问符合就近原则

在函数中访问全局中的同名变量:window.a

在函数中,不使用 var 声明的变量都会成为全局变量

var a = 33;

function fun(){
console.log("a = "+ a);
a = 10 // 实际等于 window.a = 10
}
fun()
console.log("a = "+ a); [OUTPUT]:
a = 33
a = 10

定义形参就相当于声明变量:

function fun(e){
alert(e);
}
// 可以理解为
function fun(){
var e;
alert(e);
}

声明提前

变量的声明提前(变量提升):使用var关键字声明的变量,会在所有的代码执行之前被声明,如果声明变量时不使用var关键字,则变量不会被提前声明。

只进行提前声明,并没有提前赋值。

<script>
var a = 123;
console.log(a);
</script>
<!--正常运行 输出123-->
<script>
a = 123; // 相当于 window.a = 123
console.log(a);
</script>
<!--正常运行 输出123-->
<script>
console.log(a);
var a = 123;
</script>
<!--输出 a = undefined-->
<script>
console.log(a);
a = 123;
</script>
<!--报错-->

函数的声明提前:使用函数声明形式创建的函数会在所有代码执行之前被创建,我们可以在函数声明前调用。

使用函数表达式创建的函数,不会被提前创建

<script>
function fun(){
console.log("fun");
}
var fun2 = function{
console.log("fun2");
};
fun();
fun2();
</script>
<!--正常运行-->
fun()
function fun(){
console.log("fun");
}
var fun2 = function{
console.log("fun2");
}
<!--正常运行-->
fun2()
function fun(){
console.log("fun");
}
var fun2 = function{
console.log("fun2");
}
<!--报错-->

七. 函数

函数也是一个对象,函数中可以封装一些功能(代码),在需要时可以执行这些功能。

使用typeof检查一个函数对象时,会返回function

创建一个函数对象

a. 构造函数

可以将要封装的代码以字符串的形式传递给构造函数。

封装到函数中的代码不会立即执行,仅在调用时执行。

var fun = new Function();

在实际开发中,很少使用构造函数来创建一个函数对象

b. 函数声明

使用函数声明来创建一个函数

function 函数名([形参1,形参2·····]){
语句······
}

c. 函数表达式

使用函数表达式来创建一个函数

var 函数名 = function([形参1,形参2······]){
语句······
};

将匿名函数赋值给变量。

函数的参数

  • 在传入参数时,函数解析器不会检查实参的类型,所以要注意函数有可能会接收到非法的参数
  • 调用函数时,解析器不会检查实参的数量,多余的实参不会被赋值
  • 如果实际参数的数量少于形式参数的数量,则没有对应实际参数的形式参数值为undefined
  • 函数的实际参数可以是任意数据类型,也可以是一个函数

函数返回值

使用return来设置返回值,如果return语句后不跟任何值或没有return语句就相当于返回一个undefined。

function Fun(){
return 1;
}
Fun() // 调用函数,相当于使用函数的返回值
Fun // 函数对象,相当于使用函数对象本身

对象中的函数

对象的属性值可以是任何的数据类型,也可以是个函数

var obj = new Ojbect();
obj.sayName = function(){
console.log(obj.name);
};

如果一个函数作为一个对象的属性保存,我们称这个函数是这个对象的方法

函数与方法只是名称上的区别,实质没有任何区别

var obj = {
name:"tom",
age:18,
SayName:function(){
console.log(obj.name);
}
};

函数的方法

call()apply()

这两个方法都是函数的方法,需要通过函数对象来调用

当对两个函数调用call()apply()都会调用函数执行,但是调用call()apply()可以指定一个对象为第一个参数(this)。

function fun(){
alert(this);
}
var obj = {}
fun(); // window
fun.call(obj); // Object
fun.apply(obj); // Object

call()方法可以将实参在对象之后依次传递

apply()方法可以将实参封装到一个数组中统一传递

function fun(a, b){
statement;
}
var obj = {}
fun.call(obj, a, b);
fun.apply(obj, [a, b]);

this

解析器在每次调用函数时,都会向函数内部传递两个隐含的参数。

第一个隐含的参数就是this

this指的是一个对象,这个对象我们称为上下文对象

根据函数的调用方式不同,this会指向不同的对象

  1. 以函数方式调用,this永远都是window
  2. 以方法形式调用,this就是调用方法的那个对象
  3. 以构造函数的形式调用时,this是新创建的那个对象
  4. 使用callapply调用时,this是指定的那个对象

arguments

第二个隐含的参数就是arguments

封装实参的对象 arguments,是一个类数组对象,可以通过索引来操作数据,也可以获取长度;

在调用函数时,我们所传递的实参都会在arguments中保存

arguments.length可以用来获取实参的长度

console.log(arguments[0])	// 第一个参数

里面有一个属性callee,这个属性对应一个函数对象,就是当前正在指向的函数的对象

function fun(a, b){
console.log(a);
console.log(arguments.callee = fun);
}
// True

JavaScript学习 Ⅲ的更多相关文章

  1. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习(3):函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习(2):对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  10. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

随机推荐

  1. Python报错:SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape

    运行python文件的时候报错: SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2 ...

  2. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  3. css布局中的垂直水平居中对齐

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  4. 最全面的SourceTree账号注册教程

    前言: 作为一个国内开发者而言使用Git操作神器SoureTree最大的问题就是账号注册问题,因为注册账号的链接在不翻墙的情况下基本上是打不开的(弄过的童鞋应该都体会过),所以有的时候我们需要借助一些 ...

  5. 浅淡i.MX8M Mini处理器的效能以及平台对比

    i.MX 8M Mini是恩智浦首款嵌入式多核应用处理器,定位在任何通用工业和物联网的应用,是一款针对边缘计算应用的芯片,也是恩智普i.MX系列中第一个加了机器学习核的产品线.这颗芯片采用先进的14L ...

  6. 041.Kubernetes集群网络-K8S网络策略

    一 Kubernetes网络策略 1.1 策略说明 为实现细粒度的容器间网络访问隔离策略,Kubernetes发布Network Policy,目前已升级为networking.k8s.io/v1稳定 ...

  7. matlab中imwrite函数详解(imwrite的输出格式)

    参考资料: https://www.mathworks.com/help/matlab/ref/imwrite.html?s_tid=srchtitle 你可能觉得imread函数很简单,但是还是有一 ...

  8. PyCharm罢工并向你丢出了pip升级需求

    一.事件缘由 最近在搞接口自动化框架,基于python自然少不了使用PyCharm.本来都是 在解决脚本上遇到的坑,突然出现了第三方库安装失败,这感觉就像大热天吃到 冰激凌,昏沉的脑袋瞬间清醒许多. ...

  9. WebBrowser禁用触摸缩放

    最近做一个WPF触屏的项目,引用到WebBrowser控件,由于是触屏的所以控件里的网页可以缩放,客户提出要求,屏蔽这缩放功能. 于是网上找了很多资料,也换过控件,WebView2 控件使用Micro ...

  10. MongoDB副本集replica set (二)--副本集环境搭建

    (一)主机信息 操作系统版本:centos7 64-bit 数据库版本   :MongoDB 4.2 社区版 ip hostname 192.168.10.41 mongoserver1 192.16 ...