08_with-eval-严格模式-面向对象

with 语句

with 语句可以扩展一个语句的作用域链，其实就是可以改变某一个地方的作用域，优先访问 with 参数中的作用域；

var obj = {
  name: "beanbag",
  age: 18,
};

var name = "全局的name";

with (obj) {
  console.log(name);
  console.log(age);
}

不建议使用 with 语句，因为它可能混淆错误和兼容性问题的根源

eval 函数

eval 是一个特殊的函数，它可以将传入的字符串当作 JavaScript 代码来运行

var str = 'var message = "hello"; console.log(message)';
eval(str);

不建议在开发中使用 eval:
- eval 代码的可读性非常的查(代码的可读性是高质量代码的重要原则)
- eval 是一个字符串，那么有可能在执行的过程中被可以篡改，那么可能会造成攻击的风险
- eval 的执行必须经过 JS 解释器，不能被 JS 引擎优化

严格模式

认识严格模式

在 ECMAScript5 标准中，JavaScript 提出了严格模式的概念(Strict Mode)
- 严格模式很好理解，是一种具有限制性的 JavaScript 模式，从而使代码隐式的脱离了懒散(sloppy)模式
- 支持严格模式的浏览器在检测到代码中有严格模式时，会以更加严格的方式对代码进行检测和执行
严格模式对正常的 JavaScript 语义进行了一些限制
- 严格模式通过抛出错误来消除一些原有的静默(silent)错误
- 严格模式让 JS 引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进行处理)
- 严格模式禁用了在 ECMAScript 未来版本中可能会定义的一些语法

开启严格模式

那么如何开启严格模式呢?严格模式支持粒度化的迁移
- 可以支持在 js 文件中开启严格模式
- 也支持对某一个函数开启严格模式
严格模式通过在文件或者函数开头使用 use strict 来开启

严格模式限制

这里我们来说几个严格模式下的严格语法限制：
- JavaScript 被设计未新手开发者更容易上手，所以有时候本来错误语法，被认为也是可以正常被解析的
- 但是这种方式可能带来留下安全隐患
- 在严格模式下，这种失误就会被当作错误，一边可以快速的发现和修正

无法意外的创建全局变量

"use strict";
accident = "accident"; // Uncaught ReferenceError: accident is not defined

1. 严格模式会使引起静默失败(silently fail,注: 不报错也没有任何效果)的赋值操作抛出异常
```
true.accident = 123;
```
1

严格模式下试图删除不可删除的属性

var obj = {};
Object.defineProperty(obj, "accident", {
  configurable: false,
});

delete obj.accident; // Uncaught TypeError: Cannot delete property 'accident' of #<Object>

严格模式下不允许函数参数有相同的名称

function accident(x, y, x) {
  console.log(x, y, x);
}
accident(1, 2, 3); // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

不允许 0 的八进制语法

var num = 0123; // Uncaught SyntaxError: Octal literals are not allowed in strict mode.

在严格模式下，不允许使用 with

var obj = {
  name: "accident",
  age: 100,
};
function foo() {
  var name = 10,
    age = 20;
  with (obj) {
    console.log(name, age);
  }
}
foo(); // Uncaught SyntaxError: Strict mode code may not include a with statement

1. 在严格模式下，eval 不再为上层引用变量(没有严格模式的情况下，eval 中执行的字符串中定义的变量是会到上层作用域中的)
```
var test = 'var testEval = "accident"; console.log(testEval)';
eval(test);
console.log(testEval); //  Uncaught ReferenceError: testEval is not defined
```
1
2
3

严格模式下，this 绑定不会默认转成对象(自执行函数不会绑定 window)

function foo() {
  console.log(this);
}

foo(); // undefined

var obj = () => {
  console.log(this);
};

obj(); // window

setTimeout(() => {
  console.log(this); // window
});

setTimeout(function () {
  console.log(this); // window
});

面向对象基础

面向对象是显示的抽象方式

对象是 JavaScript 中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事务
用对象来描述事务，更有利于我们将现实的事务，抽离成代码中某个数据结构
- 所以有一些编程语言就是纯面向对象的编程语言，比如 Java
- 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象

JavaScript 的面向对象

JavaScript 其实支持多种编程范式的，包括函数式编程和面向对象编程
- JavaScript 中的对象被设计成一组属性的无序集合，像是一个哈希表，有 key 和 value 组成
- key 是一个标识符名称，value 可以是任意类型，也可以是其它对象或者函数类型
- 如果值是一个函数，那么我们可以称之为是对象的方法
如何创建一个对象呢？
- 早期使用创建对象的方式最多的是使用 Object 类，var obj = new Object()，并且使用 new 关键字来创建一个对象
  - 这是因为早期很多 JavaScript 开发者是从 Java 过来的，它们也更习惯于 Java 中通过 new 的方式创建一个对象
- 后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象
  - 这种形式开起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来

// 1. 通过new方式创建
var Animal = new Object();
Animal.type = "cat";
Animal.weight = "2kg";

console.log(Animal);

// 2. 通过对象字面量创建
var Person = {
  gender: "boy",
  height: "180cm",
};
console.log(Person);

对属性操作的控制

在之前我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：

但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否可以通过 delete 删除？这个属性是否在 for-in 遍历的时候被遍历出来呢？
如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性操作符
通过属性操作符可以精准的添加或修改对象的属性
属性描述符需要使用Object.defineProperty来对属性进行添加或者修改

Object.defineProperty

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
可以接收三个参数
- obj: 要定义属性的对象
- prop: 要定义或修改的属性的名称或 Symbol
- description: 要定义或修改的属性描述符
返回值
- 被传递给函数的对象

Object.defineProperties

该方法可以直接在一个对象上定义多个新的属性或修改现有属性，并且返回该对象

补充一点: 如果希望其它属性保持不变的话，定义字面量的时候可以直接写对象的 set 和 get

var obj = {
  _weight: "2kg",
  set weight(value) {
    this._weight = value;
  },
  get weight() {
    return this._weight;
  },
};

Object.defineProperties(obj, {
  type: {
    configurable: false,
    enumerable: false,
    value: "animal",
    writable: false,
  },
  weight: {
    configurable: true,
    enumerable: true,
    get: function () {
      return this._weight;
    },
    set: function (value) {
      this._weight = value;
    },
  },
});

属性描述符分类

属性描述符的类型有两种

数据属性(Data Properties)描述符(Descriptor)
存取属性(Accessor 访问器 Properties)描述符(Descriptor)

属性描述符分类

可以看到如果是存取属性描述符的话是不能有 value 和 writable 属性的，取而代之的是 set 和 get

1. 数据属性描述符

数据属性描述符有如下四个特性：

Configurable：表示属性是否可以通过 delete 删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
- 当我们直接在一个对象上定义某个属性时，这个属性的 Configurable 为 true；
- 当我们通过属性描述符定义一个属性时，这个属性的 Configurable 默认为 false；
Enumerable：表示属性是否可以通过 for-in 或者 Object.keys()返回该属性；
- 当我们直接在一个对象上定义某个属性时，这个属性的 Enumerable 为 true；
- 当我们通过属性描述符定义一个属性时，这个属性的 Enumerable 默认为 false；
Writable：表示是否可以修改属性的值；
- 当我们直接在一个对象上定义某个属性时，这个属性的 Writable 为 true；
- 当我们通过属性描述符定义一个属性时，这个属性的 Writable 默认为 false；
value：属性的 value 值，读取属性时会返回该值，修改属性时，会对其进行修改；
- 默认情况下这个值是 undefined

var obj = {
  gender: "girl",
  height: "180cm",
};

Object.defineProperty(obj, "attribute", {
  value: "Attribute",
  // 可写
  writable: false,
  // 可删除 可重新配置为存取属性描述符 可以重新配置属性描述符
  configurable: false,
  // 可枚举
  enumerable: false,
});

obj.attribute = "write";

delete obj.attribute;

console.log(obj, Object.keys(obj));

2. 存取属性描述符

数据存取描述符有如下四个特性：

Configurable：表示属性是否可以通过 delete 删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
- 和数据属性描述符是一致的；
- 当我们直接在一个对象上定义某个属性时，这个属性的 Configurable 为 true；
- 当我们通过属性描述符定义一个属性时，这个属性的 Configurable 默认为 false；
Enumerable：表示属性是否可以通过 for-in 或者 Object.keys()返回该属性；
- 和数据属性描述符是一致的；
- 当我们直接在一个对象上定义某个属性时，这个属性的 Enumerable 为 true；
- 当我们通过属性描述符定义一个属性时，这个属性的 Enumerable 默认为 false；
get：获取属性时会执行的函数。默认为 undefined
set：设置属性时会执行的函数。默认为 undefined

var obj2 = {
  type: "animal",
  name: "cat",
  _test: "assas",
};

// 存取描述符
Object.defineProperty(obj2, "test", {
  configurable: true,
  enumerable: true,
  set: function (value) {
    this._test = value;
    console.log("set被调用");
  },
  get: function () {
    console.log("get被调用");
    return this._test;
  },
});

console.log(obj2.test);
// obj2.name;
obj2._test = "_test";
console.log(Object.keys(obj2), obj2.test);

使用场景：

隐藏某一个私有属性不希望直接被外界使用和赋值
如果我们希望截获某一个属性它的访问和设置值的过程时，也会使用存取属性描述符

# 08_with-eval-严格模式-面向对象

# with 语句

# eval 函数

# 严格模式

# 认识严格模式

# 开启严格模式

# 严格模式限制

# 面向对象基础

# 面向对象是显示的抽象方式

# JavaScript 的面向对象

# 对属性操作的控制

# Object.defineProperty

# Object.defineProperties

# 属性描述符分类

# 1. 数据属性描述符

# 2. 存取属性描述符

08_with-eval-严格模式-面向对象

with 语句

eval 函数

严格模式

认识严格模式

开启严格模式

严格模式限制

面向对象基础

面向对象是显示的抽象方式

JavaScript 的面向对象

对属性操作的控制

Object.defineProperty

Object.defineProperties

属性描述符分类

1. 数据属性描述符

2. 存取属性描述符