ES5和ES6那些你必须知道的事儿(二)

ES5和ES6那些你必须知道的事儿

ES5新增的东西

二、对象方法

  1、Object.getPrototypeOf(object)

    返回对象的原型

function Pasta(grain, width) {
    this.grain = grain;
    this.width = width;
}

var spaghetti = new Pasta("wheat", 0.2);

var proto = Object.getPrototypeOf(spaghetti);

console.log(proto)

     输出:

  2、Object.create

    用法:Object.create(prototype, descriptors)

   prototype

      必需。  要用作原型的对象。  可以为 null

   descriptors

      可选。  包含一个或多个属性描述符的 JavaScript 对象。

      “数据属性”是可获取且可设置值的属性。

      数据属性描述符包含 value 特性,

      以及 writableenumerable 和 configurable 特性。

      如果未指定最后三个特性,则它们默认为 false

   返回:一个具有指定的内部原型且包含指定的属性(如果有)的新对象

var newObj = Object.create(null, {
            size: {
                value: "large",
                enumerable: true
            },
            shape: {
                value: "round",
                enumerable: true
            }
        });

document.write(newObj.size + "<br/>");
document.write(newObj.shape + "<br/>");
document.write(Object.getPrototypeOf(newObj));

// Output:
// large
// round
// null

  3、Object.getOwnPropertyNames

    方法返回对象的所有自身属性的属性名(包括不可枚举的属性)组成的数组,但不会获取原型链上的属性。

    即对象的所有key值

  4、Object.defineProperty

     方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

     用法:Object.defineProperty(obj, prop, descriptor)

     obj:要在其上定义属性的对象。

     prop:要定义的key。

     descriptor:要定义的key对应的value。

  5、Object.getOwnPropertyDescriptor

     返回对象指定的key对应的value

     Object.getOwnPropertyDescriptor(obj, prop)

     obj:要在其上获取属性的对象。

     prop:要获取的key。

  6、Object.defineProperties

     Object.defineProperties(obj, props)

     obj: 将要被添加属性或修改属性的对象

    props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: ‘张三‘,
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 张三, 18

  7、Object.keys

     Object.keys(obj)

     一个表示给定对象的所有可枚举属性的字符串数组。

     即对象所有key值组合成的数组。

var obj = { 0: ‘a‘, 1: ‘b‘, 2: ‘c‘ };
console.log(Object.keys(obj)); // console: [‘0‘, ‘1‘, ‘2‘]

  8、Object.preventExtensions / Object.isExtensible

     应该使该对象不可扩展/应该检查的对象

     可防止将新属性添加到对象中

  9、Object.seal / Object.isSealed

     将要被密封的对象/判断一个对象是否被密封

  10、Object.freeze / Object.isFrozen

    方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。

    方法判断一个对象是否被冻结

三、 strict模式(严格模式)

  “use strict”

  将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。

  严格模式影响范围

    •   变量:  var、delete、变量关键字
    •   对象: 只读属性、 对象字面量属性重复申明
    •   函数:参数重名、arguments对象、申明
    •   其他:this、eval、关键字...

  

  设立"严格模式"的目的,主要有以下几个:错误检测、规范、效率、安全、面向未来

    - 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

    - 消除代码运行的一些不安全之处,保证代码运行的安全;

    - 提高编译器效率,增加运行速度;

    - 为未来新版本的Javascript做好铺垫。

  将"use strict"放在函数体的第一行,则整个函数以"严格模式"运行。

function strict(){
  "use strict";
  return "这是严格模式。";
}
function notStrict() {
  return "这是正常模式。";
}  

  具体体现:

    a、变量都必须先用var命令显示声明,然后再使用

    b、严格模式不能对变量调用 delete 操作符

    c、不用保留字做 变量名 或 参数名

    d、为只读属性赋值报错

    e、严格模式下参数名不能重复

    f、只能在脚本的顶级和在函数内部申明函数,if for等语句中申明函数会导致语法错误    

    g、严格模式下抑制this

四、Array.isArray() 

  用于确定传递的值是否是一个 Array

Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray(‘Array‘);
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

  instanceof 和 isArray

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

原文地址:https://www.cnblogs.com/yangyangxxb/p/10127546.html

时间: 2024-10-10 16:53:12

ES5和ES6那些你必须知道的事儿(二)的相关文章

JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向对象的文章实在是太多了,网上一搜一大堆,很多书里面也介绍的很详细.但作者当初在学习面向对象的时候还是非常困难,特别是在习惯了面向过程编程的情况下,不知道大家有没有这个感受. 作者分析了一下其中的原因,恐怕是因为里面涉及的概念太多:原型.原型链.继承.this.constructor.call等等,这

ES5和ES6中的继承

看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype = new Super(); 5 Sub.prototype.constructor = Sub; 6 7 var sub = new Sub(); 8 9 Sub.prototype.constructor

JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)

多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方式.点击桌面空白处.点击任务栏等弹出的菜单都是不同的. 方法重写(override): 即子类定义一个与父类名字相同的方法,以此覆盖父类方法,以此来实现不同的功能. 1 function Animal(){} 2 var AnimalP = Animal.prototype; 3 AnimalP.eat =

JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对象只能通过特定的接口访问,这也是面向接口编程思想的一部分. 封装是面向对象编程里非常重要的一部分,让我们来看看没有封装的代码是什么样的: 1 function Dog(){ 2 this.hairColor = '白色';//string 3 this.breed = '贵宾';//string 4 this

ES5与ES6的研究

今天开始ES5与ES6的研究. 1.什么是ES5与ES6? 就是ECMAScript的第五个版本与第六个版本,那么问题来了,什么是ECMAScript?首先它是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言,又被称为JavaScript,但其实JavaScript是ECMA-262标准的实现与扩展(说了那么多其实它就是JavaScript的一套标准),具体的名字由来及历史可以参照ECMAScript百度百科.

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类

重学ES6(二):ES5和ES6中Class类的相同与不同

ES5和ES6中Class类的相同与不同 先说结论,简而言之ES5用function定义类,ES6用class定义类,class的本质是function,ES6中的类只是语法糖,它并没有改变ES5下类实现的本质. 类的定义 ES5 // ES5函数来描写类 // 声明类 let Animal = function (type) { this.type = type // 定义实例方法 this.drink = function () { console.log('drink') } } // 定

[js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 1 function Person( uName ){ 2 if ( this instanceof Person ) { 3 this.userName = uName; 4 }else { 5 return new Person( uName ); 6 } 7 } 8 Person.proto

为Array对象添加一个去重的方法(ES5和ES6的实现)

输入一个例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq() 需要输出 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a'] 分析 题目要求给Array添加方法,所以我们需要用到prototype,数组去重本身算法不是很难,但是在Javascript中很多人会忽视NaN的存在,因为JS中NaN != NaN 在不考虑NaN的情况下我是使用inde