with-eval-严格模式-面向对象（一）

MINT
377 阅读7分钟

跟着coderwhy学习

1.with语句

  • with语句 扩展一个语句的作用域链。
var obj = {
    name: "hello world",
    age: 18
}

with(obj) {
    console.log(name)
    console.log(age)
}
  • 不建议使用with语句，因为它可能是混淆错误和兼容性问题的根源。

2.eval函数

  • eval是一个特殊的函数，它可以将传入的字符串当做JavaScript代码来运行。
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文件中开启严格模式;
    • 也支持对某一个函数开启严格模式;
//"use strict"

var message = "hello world"
console.log(message);

// 静默错误
//true.foo = "abc"

function foo() {
    "use strict";
    
    true.foo = "abc"
}

foo()

5.严格模式限制

  • 常见严格模式限制
"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 '#<Object>'
// obj.name = 'pika'
//
// delete obj.name

// 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
"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；
    • 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象；

image.png

7.JavaScript的面向对象

  • JavaScript其实支持多种编程范式的，包括函数式编程和面向对象编程：

    • JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，有key和value组成；

    • key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型；

    • 如果值是一个函数，那么我们可以称之为是对象的方法；

  • 如何创建一个对象呢？

  • 早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：

    • 这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象；

  • 后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：

    • 这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；

8.创建对象的两种方式

// 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遍历的时候被遍历出来呢？
var obj = {
    name: "mint",
    age: 18
}

  • 如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。

    • 通过属性描述符可以精准的添加或修改对象的属性；

    • 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改；

Object.defineProperty

  • Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

image.png

  • 可接收三个参数：
    • obj要定义属性的对象；
    • prop要定义或修改的属性的名称或 Symbol；
    • descriptor要定义或修改的属性描述符；
  • 返回值：
    • 被传递给函数的对象。

10.属性描述符分类

  • 属性描述符的类型有两种：

    • 数据属性（Data Properties）描述符（Descriptor）；

    • 存取属性（Accessor访问器 Properties）描述符（Descriptor）；

image.png

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.数据属性描述符测试代码

"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() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象。
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
avatar
文章
阅读
粉丝