theme: channing-cyan
跟着coderwhy学习
1.with语句
- with语句 扩展一个语句的作用域链。 ```js var obj = { name: "hello world", age: 18 }
with(obj) { console.log(name) console.log(age) } ``` + 不建议使用with语句,因为它可能是混淆错误和兼容性问题的根源。
2.eval函数
- eval是一个特殊的函数,它可以将传入的字符串当做JavaScript代码来运行。
```js var jsString = 'var message = "Hello World"; console.log(message);' eval(jsString)
console.log(message) ```
- 不建议在开发中使用eval:
- eval代码的刻度性非常的差(代码的可读性是高质量代码的重要原则);
- eval是一个字符串,那么有可能在执行的过程中被刻意篡改,那么可能会造成被攻击的风险;
- eval的执行必须经过JS解释器,不能被JS引擎优化;
3.认识严格模式
在ECMAScript5标准中,JavaScript提出了严格模式的概念(Strict Mode ) :
严格模式很好理解,是一种具有限制性的JavaScript模式,从而使代码隐式的脱离了懒散( sloppy)模式;
支持严格模式的浏览器在检测到代码中有严格模式时,会以更加严格的方式对代码进行检测和执行;
格模式对正常的JavaScript语义进行了一些限制:
严格模式通过抛出错误来消除一些原有的静默( silent)错误
严格模式让JS引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进待处理);
- 严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法;
4.开启严格模式
- 那么如何开启严格模式呢? 严格模式支持粒度话的迁移:
- 可以支持在js文件中开启严格模式;
- 也支持对某一个函数开启严格模式;
```js //"use strict"
var message = "hello world" console.log(message);
// 静默错误 //true.foo = "abc"
function foo() { "use strict";
true.foo = "abc"
}
foo() ```
5.严格模式限制
- 常见严格模式限制 ```js "use strict"
// // 1.禁止意外创建全局变量 // message = "Hello World" // console.log(message)ReferenceError: message is not defined // // function foo() { // age = 20 // } // // foo() // console.log(age);
// 2.不允许函数接具有相同的参数名称 // function foo(x, y, x) { // console.log(x, y, x)//SyntaxError: Duplicate parameter name not allowed in this context // // } // // foo(10, 20, 30)
// 3.静默错误 // var obj = {} // Object.defineProperty(obj, "name", { // writable: false, // value: 'mint' // }) // console.log(obj.name);//TypeError: Cannot assign to read only property 'name' of object '#
// 4.不允许使用原先的八进制模式 //var num = 0123 //console.log(num)//SyntaxError: Octal literals are not allowed in strict mode. // var num = 0o123 //八进制 // var num2 = 0x123 //十六进制 // var num3 = 0b100 //二进制 // console.log(num, num2, num3)
// 5.with语句不允许使用
// 6.eval函数不会向上引用变量了 var jsString = '"use strict"; var message = "Hello World"; console.log(message);' eval(jsString)
console.log(message) ```
- 严格模式下的this
```js "use strict"
// 在严格模式下, 自执行函数(默认绑定)会指向undefined // 之前编写的代码中, 自执行函数我们是没有使用过this直接去引用window function foo() { console.log(this)// undefined }
var obj = { name: "mint", foo: foo }
foo()
obj.foo() var bar = obj.foo bar()
// setTimeout setTimeout(function () { console.log(this) }, 1000) ```
6.面向对象是现实的抽象方式
对象是JavaScript中一个非常重要的概念,这是因为对象可以将多个相关联的数据封装到一起,更好的描述一个事物:
比如我们可以描述一辆车:Car,具有颜色(color)、速度(speed)、品牌(brand)、价格(price),行驶(travel)等等;
- 比如我们可以描述一个人:Person,具有姓名(name)、年龄(age)、身高(height),吃东西(eat)、跑步(run)等等;
- 用对象来描述事物,更有利于我们将现实的事物,抽离成代码中某个数据结构:
- 所以有一些编程语言就是纯面向对象的编程语言,比Java;
- 你在实现任何现实抽象时都需要先创建一个类,根据类再去创建对象;
7.JavaScript的面向对象
JavaScript其实支持多种编程范式的,包括函数式编程和面向对象编程:
JavaScript中的对象被设计成一组属性的无序集合,像是一个哈希表,有key和value组成;
key是一个标识符名称,value可以是任意类型,也可以是其他对象或者函数类型;
- 如果值是一个函数,那么我们可以称之为是对象的方法;
如何创建一个对象呢?
早期使用创建对象的方式最多的是使用Object类,并且使用new关键字来创建一个对象:
- 这是因为早期很多JavaScript开发者是从Java过来的,它们也更习惯于Java中通过new的方式创建一个对象;
后来很多开发者为了方便起见,都是直接通过字面量的形式来创建对象:
- 这种形式看起来更加的简洁,并且对象和属性之间的内聚性也更强,所以这种方式后来就流行了起来;
8.创建对象的两种方式
```js // 1.创建一个空对象 var obj1 = new Object() obj1.name = 'mint' obj1.age = 18 obj1.height = 1.72 obj1.easing = function () { console.log(this.name + "在干饭") }
//2.字面量的形式创建对象 var obj2 = { name: 'pika', age: 20, height: 1.80, running: function () { console.log(this.name + '在跑步') } } ```
9.对属性操作的控制
在前面我们的属性都是直接定义在对象内部,或者直接添加到对象内部的:
- 但是这样来做的时候我们就不能对这个属性进行一些限制:比如这个属性是否是可以通过delete删除的?这个属性是否在for-in遍历的时候被遍历出来呢?
js var obj = { name: "mint", age: 18 }
如果我们想要对一个属性进行比较精准的操作控制,那么我们就可以使用属性描述符。
通过属性描述符可以精准的添加或修改对象的属性;
属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改;
Object.defineProperty
- Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
- 可接收三个参数:
- obj要定义属性的对象;
- prop要定义或修改的属性的名称或 Symbol;
- descriptor要定义或修改的属性描述符;
- 返回值:
- 被传递给函数的对象。
10.属性描述符分类
属性描述符的类型有两种:
数据属性(Data Properties)描述符(Descriptor);
存取属性(Accessor访问器 Properties)描述符(Descriptor);
11.数据属性描述符
数据数据描述符有如下四个特性:
[[Configurable]]:表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性描述符;
- 当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
- 当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;
[[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;
当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;
[[Writable]]:表示是否可以修改属性的值;
当我们直接在一个对象上定义某个属性时,这个属性的[[Writable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Writable]]默认为false;
[[value]]:属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改;
- 默认情况下这个值是undefined;
12.数据属性描述符测试代码
```js "use strict"
var obj={ name : "mint", age: 18 }
var address =·"北京市"
0bject.defineProperty(obj, 'address',{ configurable: true, enumerable: true, get: function() { return address }, set: function(value){ address = value } }) console.log(obj.address) obj.address =·"武汉市" console.log(obj.address) ```
13.同时定义多个属性
- Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性,并且返回该对象。
```js var obj = { _age: 18 }
Object.defineProperties(obj, { name: { writable: true, value: 'mint' }, age: { get: function() { return this._age } } }) ```
14.对象方法补充
获取对象的属性描述符:
- getOwnPropertyDescriptor
- getOwnPropertyDescriptors
禁止对象扩展新属性:preventExtensions
- 给一个对象添加新的属性会失败(在严格模式下会报错);
密封对象,不允许配置和删除属性:seal
- 实际是调用preventExtensions
- 并且将现有属性的configurable:false
- 冻结对象,不允许修改现有属性: freeze
- 实际上是调用seal
- 并且将现有属性的writable: false