JavaScript 进阶篇

个人博客地址：https://blog.3xnb.com

面向对象

概述

面向对象编程的全称为Object Oriented Programming,简称为OOP。  面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。  面向对象编程可以看作是使用一系列对象相互协作的软件设计。  面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性。  凭借其对模块化的重视，面向对象的代码开发更简单，更容易理解。 "面向对象编程的三个主要特征是: (1) 封装; (2)继承; (3)多态。"  所有的程序是由一定的属性和行为对象组成的，不同的对象的访问通过函数调用来完成，对象间所有的交流都是通过方法调用，通过对封装对象数据，提高复用率。  -----------------------------------------------------------------------------------------  " JS是一种基于原型的面向对象语言，而不是基于类的。" 

定义函数

1、函数关键字（最常用）  function fun(){     console.log("我是关键字定义的函数") } ------------------------------------------------------------------------------ 2、字面量表达式（函数体固定，无法动态执行，若有同名变量将会被覆盖） var fun=function(){     console.log("我是字面量定义的函数") }  --------------------------------------------------------------------------------- 3、Function类型定义（效率低，由Function构造的函数参数可变，最后一个参数为函数体，其他参数为形参）  var person=new Function( "name",     "age",     "console.log(name,age)" ) person("jine",22) /*  结果：jine 22 */ 

JS没有函数重载

在JavaScript中，如果定义多个同名函数，只有最后一个函数定义有效  例:  function add(a,b){     return a+b; } function add(a,b,c){     return a+b+c; } add(1,2) add(1,2,3) /*  结果为：    NaN    6 由结果可看出来第一个为NaN，是因为用的是三个参数的函数。 */ 

arguments 可模拟重载

可用arguments模拟函数重载  存在与函数体中的特殊对象: 1、原本是Function类型的arguments属性 2、用于接收函数的实参 3、结果类似数组的对象  例： function fun(){     console.log(arguments) /*结果为：{"0":1,"1":2,"2":3}*/     console.log(arguments[0]) /*结果为：1*/ } fun(1,2,3)  ---------------------------------------- length属性：获取函数实参的个数  模拟函数重载，例如：  function add(){     var len=arguments.length;     if(len==2){         return arguments[0]+arguments[1]     } else if(len==3){         return arguments[0]+arguments[1]+arguments[2]     }else{         return arguments     } } add(1) add(1,2) add(1,2,3) /*arguments.length用来接收实参的值，所以可以来模拟函数重载*/  arguments.callee() /*用于引用该函数的函数体内当前正在执行的函数。 递归的调用，此时运行的自身的函数 */ 

函数递归

函数体中不断调用自身。  var num=0 /*设置递归出口*/ function fun(){ console.log("开始递归了~")     num++     if(num<6){ fun() }else{         return; } } fun()  ---------------------------------------- var num=0 /*设置递归出口*/ function fun(){ console.log("开始递归了~")     num++     if(num<6){ /*f()          此时的fun()的内存已经被释放，所以不能调用，会报错         */         arguments.callee() /*递归的调用，此时运行的自身的函数*/ }else{         return; } } f=fun /*将fun函数赋值给f*/ fun=null /*释放fun内存*/ f() /*调用f()*/ 

特殊函数

匿名函数

JavaScrip可以将函数作为数据使用。 作为函数本体，它像普通的数据一样,不一定要有名字。 默认名字的函数被称之为匿名函数。  匿名函数-表示没有名称的函数 ★问题：JavaScript语法并不支持匿名函数 *应用：  1、回调函数-将一个函数作为另一个函数的参数使用，作为参数的函数  2、自调函数-函数调用自身(定义即调用的函数)    如下示例: function (a){return a;} 匿名函数的两种用法: ●可以将匿名函数作为参数传递给其他函数。 这样，接收方函数就能利用所传递的函数来完成某些事 情。 ●可以定义某个匿名函数来执行某些一次性任务。  

回调函数

当一个函数作为参数传递给另一个函数时，作为参数的函数被称之为回调函数。  匿名回调函数优势： 1、不占用全局命名空间（内存） 2、将私有的数据内容开放给指定位置使用 3、虽然可以使用私有数据，但不清楚来源（封装）  回调缺点： 相当于函数不断嵌套，外层函数的参数是另外第一个函数。这样会使性能下降   例如：  function fun(arg){   var name="jine" arg(name) } fun(function(x){console.log(x)}) /*  执行顺序：调用fun()入口，里面将匿名函数当作fun的形参传入，去寻找定义fun()函数，在fun()函数体中调用已当作实参传入的匿名函数和传入的实参，去寻找定义的匿名函数将实参传入到形参执行。 */ ---------------------------------------------------------------------------------------- function add(a, b){  return a()+ b(); } var one = function(){return 1;} var two = function(){return 2;} console.log(add(one,two)); //3  //可以直接使用匿名函数来替代one()和two()，以作为目标函数的参数 console.log(add(function(){return 1;}, function(){return 2;}); 

自调函数

作用：用于执行一次性的逻辑任务 应用：作为整体逻辑代码外层结构（因为没有函数名，全局作用域访问不到）  语法结构：   *第一个括号：定义函数  *第二个括号：调用函数    1、表达式方式  国内写法： (function(v){  console.log('this is ' + y); })('function');  国外写法： (function(v){     console.log("this is "+y); }("function"))  2、其他写法(不常用，有大概20多种)：  !(function(v){  console.log('this is ' + y); })('function');  +(function(v){  console.log('this is ' + y); })('function');  ~(function(v){  console.log('this is ' + y); })('function'); 

作为值的函数

在函数体中定义另一个函数（内部的私有函数）  function fun(){ return function(){         return "jine" }; }  var result=fun() console.log(result) /*function fun()--*/ console.log(result()) /*jine*/ 

闭包

JavaScript允许函数嵌套，井且内部函数可以访问定义在外部函数中的所有变量和函数，以及外部函数能访问的所有变量和函数。 但是，外部函数却不能够访问定义在内部函数中的变量和函数。 当内部函数以某一种方式被 任何一个外部函数作用域访问时，一个闭包就产生了。 闭包就是词法表示包括不必计算的变量的函数，也就是说，该函数能使用函数外定义的变量。  闭包的作用: ●提供可共享的局部变量。 ●保护共享的局部变量。提供专门的读写变量的函数。. ●避免全局污染。   例如：  function fun1(arg){     var a=100; arg(a) } function fun2(arg){     console.log(arg) } fun1(fun2) 

作用域链

var a="a" function fun(){     var b="b"     console.log(a)     console.log(b)     console.log(c) /*      只能访问到a和b     */ function fn(){         var c="c"         console.log(a)         console.log(b)         console.log(c) /*          结果可以访问到变量a、b、c         */ } } 

Function 类型

Function类型是. JavaScript提供的引用类型之一， 通过Function类型创建Function对象。 在JavaScript中，函数也是以对象的形式存在的。 每个函数都是一个Function对象 。 函数名，本质就是一个变量名，是某个Function对象的引用。  function fn(){ console.log('hello'); } console.log(fn instanceof Function);// true  ----------------------------------------------------------------------------------------- 使用Function类型创建一个函数对象  例： var fun =new Function('a,b','console.log("this is " + a)') fun("第一个实参","第二个实参")   可用instanceof来判断Object和Function和函数之间的关系：  个人理解：Function既是一个引用类型（看作为类或者是构造函数或叫做对象模板）也是一个包装类型（看作为对象），而函数便是一个Function类型的对象。而js中所有的对象都是Object类型。  Function引用类型可以当作是一个构造函数，构造函数便是一个Functon类型的对象，所以Object也是一种Function类型对象  总结：万物皆对象，函数就是一个对象，函数名仅仅保存指向函数对象的指针，每个函数都是Function类型的实例 

length属性

function fun(a,b){     console.log("函数") } console.log(fun.length) /*length属性获取的是形参的个数*/ "如若没有形参，默认便为0" 

apply() 方法

Function类型的apply()方法用于调用一个函数，并且接受指定的this值，以及一个数值作为参数。  结构如下： function fun(){     xxxxxxx } fun.apply(thisArg, [argsArray]) /*因apply是Function类型中的方法，而fun又是Function实例化的对象，所以此时的fun是一个对象，且便有了对象模板Function中的方法apply*/ ●thisArg参数: 可选项，在func函数运行时使用的this值(当前调用函数的对象)。"如果不使用，可提供默认值为null或undefined" ●argsArray参数(接受指定函数的实参): 可选项，一个数组或者类数组对象，其中的数组元素将作为单独的参数传给func函数。也可以使用arguments对象作为该参数。 ●返回值:调用该函数的返回结果。  例： function fun(name,age){   console.log("姓名："+name,"年龄:"+age) } fun("jine",22) fun.apply(null,["jine",22]) fun.apply(undefined,["jine",22]) fun.apply(fun,["jine",22]) /*以上结果都相同*/ 

call() 方法

Function的cal()方法用于调用一个函数，并且接收指定的this值作为参数，以及参数列表。  结构如下: func.call(thisArg,arg1,arg2, ..) ●thisArg参数:在func函数运行时使用的this值。 ●arg1, arg2,参数:指定的参数列表。 ●返回值:调用该函数的返回结果。  例： fun("jine",22) fun.call(null,"jine",22) fun.call(undefined,"jine",22) fun.call(fun,"jine",22) /*以上结果都相同*/ apply()与call()非常相似，不同之处在于提供参数的方式。 "apply()参数为数组，而call()参数为列表" 

bind() 方法

Function的bind()方法用于创建一个新的函数(称为绑定函数)，井且接收指定的this值作为参数，以及参数列表。  语法结构如下: fun.bind(thisArg[,arg1[,arg2[...]]])  ●thisArg参数:当绑定函数被调用时，该参数会作为原函数运行时的this指向。 ●arg1,arg2,....参数:绑定函数被创建时的实参。（新创建的函数作调用时，传递的实参无效） ●返回值:返回由指定的this值和初始化参数改造的原函数拷贝。  function fun(arg){     console.log("this is "+arg) } fun("实参") /*结果：this is 实参*/  var f=fun.bind(null,'新传入的第一个实参') f() /*结果：this is 新传入的第一个实参*/ f("新传入的第二个实参") /*  没有打印出结果，并不是传入实参无效，因绑定时有了第一个预定的参数，在进行调用传参的话便被当作第二个参传入，而上面的fun()函数的形参只有一个，那么其他的参数便接受不到。  可进行测试：     function fun(arg,args){         console.log("this is "+arg,"this is "+args)     }     fun("实参")     /*结果：this is 实参 this is undefined*/      var f=fun.bind(null,'新传入的第一个实参') f() /*结果：this is 实参 this is undefined*/ f("新传入的第二个实参") /*结果：this is 新传入的第一个实参 this is 新传入的第二个实参*/ */   "注意：bind()后的新函数传入的实参，并不会改变或影响原有函数的实参，相当于再内存中一共俩块内存，而又互不干涉。这种bind()后被称作深克隆（克隆内容，是俩个内存，相当于内存拷贝）。补充：浅克隆（共享内存）相当于内存的指针的拷贝" 

Object 类型

构造函数构造对象  当以非构造函数形式被调用时，Object等同于 new Object() var a= Object()    //函数调用创建对象 var b= new Object()  //构造函数调用创建对象 

构造函数

构造函数又称为构造器或对象模板，也称为类，是对象中的一个方法，在实例化时构造器被调用。  在JavaScript中函数就可以作为构造器使用，因此不需要特别地定义一个构造器方法。  例：  function Obj(name,age){ this.name=name     this.age=age     this.fun=function(){         console.log("开始打印:"+name,+age) } }  var person=new Obj("jine",22) person.fun() 

构造对象

1、初始化器直接构造对象 var obj={ name:"jine",     age:22 } obj.name obj.age   -------------------------------------------------------------------------------------- 2、构造函数（对象模板）构造对象 "（效率高）"" function Obj(name,age){     this.name=name     this.age=age } var xiaowang=new Obj("小王",20) var xiaoxiao=new Obj("小小",22) "俩种对比：初始化器每次创建对象都要写一次。而构造函数构造对象，只需要new，便可new出多个不一样的对象"   console.log(obj.constructor) /*  constructor 属性 是来自于Object类型，而js中所有的对象都是Object类型，那么每创建一个对象便带有一个constructor属性，这个属性叫做构造器，作用是：将开辟出来的对象内存地址，指向到对应的对象模板，那这样创建出来的对象便会有了对象模板中的属性和方法 */ ---------------------------------------------------------------------------------------- 3、Object() 构造对象  var obj={ name:"jine",     age:22 } var Person=Object(obj) /*第一种：obj通过Object()将自有的属性和方法复制到新创建的对象Person中*/  ------------------------ var newObj=Object() newObj.name="jine" newObj.age=22 /*第二种：通过Object()使newObj成为一个空对象，然后再通过添加对象的属性和方法进行添加*/ 

操作对象属性

属性描述符

JavaScript提供了一个内部数据结构，用于描述对象的值，控制其行为。  例如该属性是否可写、可配置、可修改以及可枚举等。  这个内部数据结构被称为“属性描述符”。 每个属性都有自己对应的属性描述符，保存该属性的元信息。 { value:'jine'，     writable: false,     enumerable: true,     configurable: false,     get: undefined,     set: undefined } 对象里目前存在的属性描述符有两种主要形式:"数据描述..符和存取描述符。"   ----------------------------------------------------------------------------------------- 1、数据描述符  数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。  数据描述符具有以下可选键值: ●value: 该属性对应的值。可以是任何有效的JavaScript值(数值，对象，函数等)。默认为undefined。 ●writable:当取当该属性的writable为true时，value才能被赋值运算符改变。默认为false。 ●configurable: 当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。 ●enumerable:当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。  ----------------------------------------------------------------------------------------- 2、存取描述符  存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值: ●get:给属性提供getter的方法，如果没有getter则为undefined。  当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象。  ●set: 给属性提供setter的方法，如果没有setter则为Undefined。 当属性值修改时，触发执行该方法。该访法将接受唯一参数， 即该属性新的参数值。  ●configurable: 当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属 性也能从对应的对象上被删除。默认为false。  ●enumerable: 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。 

获取属性描述符

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。 Object.getOwnPropertyDescriptor(obj,prop) ●obj: 需要查找的目标对象。 ●prop:目标对象内属性名称( String类型)。 ●返回值:如果指定的属性存在于对象上，则返回其属性描述符对象，否则返回undefined。 "注意:如果该方法的第一个 参数不是对象，会报错(TypeError)。"  var obj= {} obj.attr= 'jine'; /* {value:“jine”，writable: true, enumerable: true, configurable: true} */ console.log(Object.getOwnPropertyDescriptor(obj,'attr')); "返回的默认是数据描述符" getOwnPropertyNames()方法 "可以循环遍历对象中可被枚举和不可被枚举的属性" 

设置属性描述符

1. Object.defineProperty()方法为对象定义新属性或修改现有属性， 并返回该对象。 Object.defineProperty(obj, prop, descriptor)  ●obj: 要在其上定义属性的对象。 ●prop:要定义或修改的属性的名称。 ●descriptor: 将被定义或修改的属性描述符。 ●返回值:被传递给函数的对象。  例: var obj={ name:"jine" } Object.defineProperty(obj,'name',{ value:"Ren" }); console.log(obj.name); /*  结果为：Ren */ "注意：如果直接使用对象名.属性名=值，那么当前属性描述符默认为可修改、可删除、可枚举" "如果使用Object.defineProperty()方法,该新属性描述默认都为false，也就是不能修改、删除、可枚举"，当然也可以用writable、configurable、、value、enumerable等设置为true ----------------------------------------------------------------------------- 2. Object.definePropecties()方法为对象定义一个或多个新属性或修改现有属性，并返回该对象。 Object.defineProperties(obj, props) ●obj: 要在其上定义属性的对象。 ●props:要定义其可枚举属性或修改的属性描述符的对象。 ●返回值:被传递给函数的对象。 

属性描述符的存储器

第一种写法：  var obj={ name:"jine" } var value Object.defineProperty(obj,'name',{ get:function(){             console.log("get function")             return value     },     set:function(newValue){             console.log("set function")             value=newValue     } });  obj.name="ren" /* 输出结果:    ren   set function */  obj.name /* 输出结果:   ren   get function */ ----------------------------------------------------------------------------------------- 第二种写法：  var obj={ get attr(){   return "jine"; },     set attr(value){         console.log("setter:"+value); } } console.log(obj.attr) /*  jine */  obj.attr=100; /*  setter:100 */ 

防篡改对象

定义的对象默认在任何时候、任何位置，无论有意义的还是无意义的都可以修改对象的属性或方法。 而这些篡改可能会影响对象的内置属性或方法，从而导致对象的正常功能可能无法使用。  JavaScript在ECMAScript5版本中新增了放置篡改对象的属性或方法的机制，共提供了以下三级保 护方式:  1. 禁止扩展:禁止为对象扩展新的属性或方法 2. 密封对象:禁止扩展新的属性或方法，禁止配置现有的属性或方法的描述符，仅允许读写属性的值。 3. 冻结对象: 禁止对对象执行任何修改操作。 

禁止扩展

如果禁止为对象扩展新的属性或方法，需要修改对象属性的extensible为false。  ●Object.preventExtensions()方法用于设 置指定对象不可扩展，即不能新增属性或方法。 ●Object.isExtensible()方法判断一个对象 是否是可扩展的(是否可以在它上面添加新的属性)。 true：表示指定目标对象是可扩展 false：表示指定目标对象不可扩展  例：  var obj={}  Object.preventExtensions(obj) obj.name="jine" console.log(Object.isExtensible(obj)) /*false为禁止扩展*/ console.log(obj.name) /*结果为undefined*/ 

密封对象

密封对象，就是指禁止为对象扩展新的属性或方法，并且禁止修改现有属性的"描述符"。  ●Object.seal()方法用于封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。 当前属性的值只要可写就可以改变。 ●Obiject.isSealed()方法判断一个对象是否被密封。  /*最简单的方法来生成一个密封对象，当然是使用Object.seal.*/ var sealed= {}; Object.seal(sealed); Object.isSealed(sealed);    // === true /*一个密封对象同时也是不可扩展的.*/ Object.isExtensible(sealed);  // === false   ---------------------------------------------------------------------------------------- 例： "如下代码测试，结果重要 ***" var obj={name:"jine"} Object.seal(obj) obj.name="ren" obj.name /*  1、结果得出name属性值被更改为：ren */ obj.age=22 obj.age /*  2、结果为undefined，由此可知，被密封后的对象，可以用直接修改的方法，来修改属性值或方法值，但是不能新增属性和方法 */  console.log(Object.getOwnPropertyDescriptor(obj,"name")) /*  3、此时密封对象后的打印结果为：                                 configurable: false                                 enumerable: true                                 value: "ren"                                 writable: true   因其原来声明的对象，其中name的数据属性符都为true，但密封对象后只有configurable变为了false,那么因此当delete obj.name后，并不比起作用，可以看出configurable:flase;是生效了。 */ Object.defineProperty(obj,'name',{ value:"jine" }) /*  4、结果可以更改对象的属性值 */ Object.defineProperty(obj,'name',{ value:"jine",     writable:false }) /*  5、结果可以更改，但需要注意的是，如若在此操作后在执行一次writable:true 便会报错 */   总结：可以直接obj.name="jine" 修改属性或方法的值（但不能新增），而且也不能用defineProperty()来新增，defineProperty()还是可用来操作value和writable（只能改一次），也就是说可以来修改值或者改变writable属性描述符，但另外俩个不能修改   "注意:将对象进行密封后：1、不能为该对象新增属性或方法。2、不能进行修改的描述符为：configurable和enumerable " 

冻结对象

冻结对象，就是指禁止对 对象执行任何修改操作。  ●Object.freeze()方法用于冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。  ●Obj.isFrozen()方法判断一个对象是否被冻结。  //使用0bject.freeze是冻结一个对象最方便的方法. var obj={name:"jine" }; Object.isFrozen(obj) //=== false，对象没有被冻结 Object.freeze(obj); // 开始冻结指定对象 Object.isFrozen(obj)  //=== true，冻结对象 Object.isSealed(obj) //true，一个冻结对象也是一个密封对象. Object.isExtensible(obj)//false，当然，更是一个不可扩展的对象. 

原型

在JavaScript中，函数是一个包含属性和方法的Function类型的对象。 而原型( Prototype)就是Function类型对象的一个属性。  在函数定义时就包含了prototype属性，它的初始值是一个空对象。null  在JavaScript中并没有定义函数的原型类型，所以原型可以是任何类型。  原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和方法。  "JavaScript语言中，ECMAScript5之前原型链就是实现继承的默认方式"   function fun(){     name='jine'     console.log(name) } console.log(fun.prototype) /*结果为空对象：fun{}  */ 

获取原型

通过如下两种方式可以获取对象的原型，从而设置共享的属性和方法:  ●通过构造函数的prototype属性。 function Person() {  console.log('Person instantiated'); } console.log(Person.prototype); console.log(Person["portotype"]); /*俩种方式结果一样，*/ ●通过Object对象的getPrototypeOf( obj )方法。 function Person() {  console.log('Person instantiated'); } console.log( Object.getPrototypeOf( Person) ); 

为原型新增属性和方法

function fun(){     console.log("hha") } fun.prototype.name="jine" /*第一种方式*/ Object.defineProperty(fn.prototype,'age',{ value:22,     enumerable:true }) /*第二种方式*/ 

为原型新增属性或方法的写法扩展

自有属性与原型属性

●自有属性:通过对象的引用添加的属性。其它对象可能无此属性;即使有，也是彼此独立的属性。 ●原型属性:从原型对象中继承来的属性，一旦原型对象中属性值改变，所有继承自该原型的对象属性均改变。  例如： function fun(name){ this.name=name     this.print=function(){         console.log(this.name)         console.log(this.age) } } fun.prototype.age=22 fun.prototype.printf=function(){console.log("我是原型方法")} /*     为fun构造函数设置原型age属性（此时便为原型属性）     为fun构造函数设置原型printf方法（此时便为原型方法） */  var jine=new fun("jine") jine.print() /* 构造jine对象，并打印，结果为：jine 22 （此时的jine便为自有属性，而22便为原型属性） */  var ren=new fun("ren") ren.print() /*构造ren对象，并打印，结果为:ren 22 */  jine.printf() ren.printf() /*调用原型方法*/ 

覆盖原型属性

----------------------------------------------------------------------------------------- 深入练习1，例如：  function fun(name){ this.name=name     this.print=function(){         console.log(this.name)         console.log(this.age) } }  fun.prototype.age=22 var jine=new fun("jine") jine.age=20 /*将原型提供的属性覆盖了，但不会改变原型的属性*/ var ren=new fun("ren")  jine.print() /*结果：jine 20*/ ren.print() /*结果：ren 22  所以说操作对象，并不会改变原型中的属性和方法 */ ----------------------------------------------------------------------------------------- 深入练习2，例如  function fun(name){ this.name=name     this.age=18     this.print=function(){         console.log(this.name)         console.log(this.age) } }  fun.prototype.age=22 var jine=new fun("jine") jine.age=20 var ren=new fun("ren")  jine.print() /*结果：jine 20 覆盖掉了构造函数提供的age属性和原型的age属性 */ ren.print() /*结果：ren 18 被构造函数提供的age属性覆盖了，并没有改变原型 */  console.log(fun.prototype) /*结果看出原型的属性并没有更改*/ 

检测自有属性或原型属性

●使用hasOwnPrototype()方法"检测对象是否具有指定的自有属性" function Hero(){} Hero.prototype.name="jine" var hero = new Hero() console.log(hero.hasOwnProperty("name")) /*  结果为：false（不存在自有属性。可能是原型属性，可能不是。这个方法只是用来判断是否有自有属性）， 如若为true，便是自有属性。 */ ●使用in关键字检测对象及其原型链中是否具有指定属性（自有属性或原型属性）: function Hero(){} Hero.prototype.name="jine" var hero = new Hero() console.log( "name" in hero ); /*  结果为：true（有指定属性，可能为自有属性，也肯为原型属性） */ 

显式原型与隐式原型

function Fun(name){     this.name=name } Fun.prototype.age=22 var jine=new Fun("jine") console.log(Fun.prototype) console.log(jine.__proto__)  prototype（函数的原型，也称为显式原型） __proto__ （对象的原型，也称为隐式原型） 

isPrototypeOf()方法

用来判断一个对象是否是另一个对象的原型  var obj={ name:'jin' } function Fun(){} Fun.prototype=obj var person=new Fun() obj.isPrototypeOf(person) /*true*/ 

扩展内置对象

1、第一种写法  例如： console.log(Object.prototype) /*{}*/ Object.prototype.print=function(){     console.log("我是扩展的方法") } var person=new Object() person.print() /*我是扩展的方法*/ "这样扩展了内置的对象，随着js版本更新可能会和内置对象引起冲突"  2、第二种写法  例如： Object.defineProperty(Object.prototype,'print',{ value:function(){         console.log("我是扩展的方法") } });  var person=new Object() person.print()  ----------------------------------------------------------------------------------------- 扩展： Array.prototype.inArray=function(color){ for(var i=0,len=this.length;i<len;i++){ if(this[i]===color){             return ; } }     return false; }  var a=["red","green","blue"]; console.log(a.inArray("red")); /*true*/ console.log(a.inArray("yellow")) /*false*/ 

原型链

个人理解：   /*  * @Author: Jine   * @Date: 2020-06-07 22:56:18   * @Last Modified by: Jine  * @Last Modified time: 2020-06-08 21:01:21  *   * 代码内容：  * 原型链图片验证，因为很多文章或者每个人的理解不同，本人也不是很明白  * 而且本人老是钻牛角尖，所以希望能用代码可以反推  * 下面代码是自身结合原型链图片简单测试  * 得到的理论，部分来自代码测试结果，部分来自众多文章中共鸣的结果  */ /*     1、__proto__和prototype关系   */ function Foo(){     this.name="jine" }  Foo.prototype.age=22 var foo=new Foo() console.log(Foo.prototype) /*结果：Foo { age: 22 } */ console.log(foo.__proto__) /*结果：Foo { age: 22 } */ console.log(Foo.prototype===foo.__proto__) /*    结果： true    结论：Foo构造函数的prototype原型对象和foo对象的__proto__是相等的，都指向了同样的原型对象     补充知识：     prototype（构造函数的原型，也称为显式原型）     __proto__ （对象的原型，也称为隐式原型） */ /*     2、constructor */ console.log(Foo.prototype.constructor===Foo) /*     结果:true     结论：Foo构造函数的原型对象的constructor指向Foo构造函数 每个构造函数都会默认构造出原型对象，而原型对象的constructor属性指向的是实例化本原型对象的构造函数 */ /*     3、对象函数（function Object）和普通函数（function Function）的指向关系 */ function fun(){     console.log("我是一个普通函数") } console.log(fun.__proto__) /*     普通函数结果：[Function]      结论：普通函数也能用 __proto__属性，说明普通函数也是一个特殊的对象         其原型的__proto__指向的是Object.prototype  */ console.log(Foo.__proto__) /*     对象函数结果：[Function]      结论：对象函数的原型是Function.prototype，说明对象函数也是一个特殊的函数 */   console.log(fun.__proto__===Foo.__proto__) /*     结果：true     结论：普通函数function Function()和对象函数function Object()的原型都是Function.prototype */  console.log(fun.__proto__.__proto__===Foo.prototype.__proto__) /*     结果：true     结论：此时函数和对象指向的是Object.prototype  */  console.log(Foo.prototype.__proto__.__proto__) /*     结果：null     结论：所有对象的最终原型都是空对象  */  console.log(foo instanceof Object) console.log(Foo instanceof Object) console.log(Foo instanceof Function) console.log(fun instanceof Function) console.log(fun instanceof Object) console.log(foo.__proto__ instanceof Object) console.log(Function.__proto__ === Function.prototype); console.log(Function.prototype.constructor === Function); console.log(Function.prototype === Function.prototype); /*以上结果都为true */ /*  总结：         虽然这些代码也不能完全证明Function和Object关系，但也可以从中获取收益         1、所有对象都是Object的实例，并继承Obejct.prototype的属性和方法         2、Obejct.prototype是所有对象的原型         3、__proto__和constructor属性是对象所独有的         4、prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。         5、通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。         6、constructor属性的含义就是指向该对象的构造函数         7、Object.prototype.__proto__最终原型为null         8、函数也是对象，只不过是具有特殊功能的对象而已。任何函数都可以看做是通过Function()构造函数的new操作实例化的结果  Function与Object的三角关系：     可以分为俩种角度看：         1、Object角度：             Foo.prototype是foo的原型对象，同时自身也是实例的对象             因为任何对象都可以看作是通过Object()构造函数new实例化的对象             所以Foo.prototype作为实例对象，它的构造函数是Object()             而其原型对象便是所有对象的原型，Object.prototype             实例对象Foo.prototype的proto属性同样指向原型对象Objec.prototype             而Obejct.prototype的constructor属性指向实例自己的构造函数Object                  2、Function角度：             函数也是对象，任何函数都可以看作通过Function()构造函数new实例化的结果             那么，Function可以看成是调用其自身的new操作的实例化的结果             把函数Foo当作实例化对象时，其构造函数Function，所以其__proto__指向Function.prototype             如果Function.prototype作为实例对象的话，其原型对象可以看成是Object()构造函数的new操作的实例化结果。             所以，Function.prototype的原型对象是Object.prototype，其原型函数是Object()      最后的总结：         总体来说吧，JavaScript原型链很乱，         如果把它想简单：函数也是个对象，对象也是个函数，万物皆为对象，所有对象的原型的最终节点都为null         如果把它想复杂：通过表象很难找到正确答案，越饶越乱，可能最终要涉及到更为底层原理，而实际开发运用不多   */ 

原型链补充

function A(){     this.a='a' } /*创建a对象*/ var a=new A()  function B(){     this.b='b' } /*B构造函数的原型指向对象a*/ B.prototype=a /*创建b对象*/ var b=new B() function C(){     this.c='c' } /*C的构造函数的原型指向对象b*/ C.prototype=b /*创建b对象*/ var c=new C()  console.log(a.a) /*a*/ console.log(a.b) /*undefined*/ console.log(a.c) /*undefined*/ console.log(b.a) /*a*/ console.log(b.b) /*b*/ console.log(b.c) /*undefined*/ console.log(c.a) /*a*/ console.log(c.b) /*b*/ console.log(c.c) /*c*/ /*以上为了实现继承关系而不是共享，而单独创建对象，会对效率有影响*/ ----------------------------------------------------------------------------------------- 如下为c对象完成继承，而优化代码：  function A(){} A.prototype.a="a" /*给A构造函数的原型添加a属性*/ function B(){} /*将B的原型指向A的原型*/ B.prototype=A.prototype /*B的原型添加b属性，此时已有了a属性 若把代码顺序更改，先给B的原型赋值b属性后，再将A的原型赋值到B的原型，会产生原型空间指向被更改问题（开始指向的内存空间，会被第二此赋值更改为指向A的原型内存空间） */ B.prototype.b='b' /*这样虽然效率优化，但写法便被固定*/ function C(){     this.c='c' } C.prototype=B.prototype;  var c=new C() console.log(c.a) /*a*/ console.log(c.b) /*b*/ console.log(c.c) /*c*/ 

原型链问题

1、原型链实际上是在多个构造函数或对象之间"共享属性和方法"  以下代码实现了原型共享而不是单向的继承，例如： function A(){} A.prototype.a="a"  function B(){} B.prototype=A.prototype B.prototype.b='b'  function C(){} C.prototype=B.prototype; C.prototype.c='c'  var c=new C() console.log(c.a) /*a*/ console.log(c.b) /*b*/ console.log(c.c) /*c*/  var a=new A() console.log(a.a) /*a*/ console.log(a.b) /*b*/ console.log(a.c) /*c*/  var b=new B() console.log(b.a) /*a*/ console.log(b.b) /*b*/ console.log(b.c) /*c*/ /*  以上的a，b，c的原型，都是指向同一个内存空间，最终指向的都是A构造函数的原型 */ ----------------------------------------------------------------------------------------- 2、创建子类对象时，不能向父级的构造函数传递任何参数 

原型式继承

/*  * @Author: Jine   * @Date: 2020-06-07 17:07:20   * @Last Modified by: Jine  * @Last Modified time: 2020-06-07 17:30:02  */ /*     定义一个函数：用于实现对象之间的继承     参数：         obj：继承关系中的父级对象(也就是当前对象的原型)         prop：继承关系中的子级对象的属性和方法（也就是自有属性和方法）  */ function fun(obj,prop){ function Fun(){ for(var i in prop){             this[i]=prop[i]             /*this[i]:给当前对象添加属性                 prop[i]:获取传入对象属性的值             */ } }      Fun.prototype=obj     return new Fun(); } var result=fun({name:"jine"},{age:18,hell:22,se:23})  console.log(result)  console.log(result.name) 

Object.create() 实现继承

语法:Object.create(proto[, propertiesObject]) 参数: proto 新创建对象的原型对象。 propertiesObject可选。如果没有指定为 undefined，则是要添加到新创建对象的不可枚举（默认）属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。 这些属性对应Object.defineProperties()的第二个参数。  返回值:一个新对象，带着指定的原型对象和属性。  例：  /*  * @Author: Jine   * @Date: 2020-06-07 17:42:31   * @Last Modified by: Jine  * @Last Modified time: 2020-06-07 17:48:13  */ var newObj=Object.create({name:"jine"},{ age:{ value:18,          writable:false      } })  console.log(newObj) /*{} */  console.log(newObj.name) /*jine */  console.log(newObj.age) /*18 */ 

借助构造函数实现继承

无论是原型链还是原型式继承，都具有相同的问题。 想要解决这样的问题的话，可以借助构造函数(也可以叫做伪造对象或经典继承)。  这种方式实现非常简单，就是在子对象的构造函数中调用父对象的构造函数。 具体可以通过调用apply()和call()方法实现。 apply()和call()方法都允许传递指定某个对象的this。 对于继承来讲，可以实现在子对象的构造函数中调用父对象的构造函数时，将子对象的this和父对象的this绑定在一起。 

组合方式继承

组合继承，也叫做伪经典继承，指的是将原型链或原型式继承和借助构造函数的技术组合在一起，发挥二者长处的一种继承方式。  具体实现的思路就是:  ●使用原型链或原型式继承实现对原型的属性和方法的继承。 ●通过借助构造函数实现对实例对象的自有属性的继承。 这样，既通过在原型上定义方法实现了函数的重用，又可以保证每个对象都有自己的专有属性。  例如： /*  * @Author: Jine   * @Date: 2020-06-07 19:06:23   * @Last Modified by: Jine  * @Last Modified time: 2020-06-07 19:14:54  */ /*构造函数的自有属性*/ function Parent(){      this.parent="parent" } /*Parent的原型属性 */  Parent.prototype.age=22   /*构造函数的自有属性*/ function Child(){      this.child="child"      Parent.call(this) } /*将Child的原型属性指向Parent原型属性 */  Child.prototype=Parent.prototype   var child=new Child()  console.log(child) /*Parent { child: 'child', parent: 'parent' }     此时child对象的原型为Parent  */  console.log(child.age) /*22*/ /*以上结果可看出，child对象即继承了父级的原型属性，也继承了父级的自有属性 */ 

错误与异常

错误，指程序中的非正常运行状态，在其它编程语言中称为“异常”或“错误”。 解释器会为每个错误情形创建并抛出一个Error对象, 其中包含错误的描述信息。 通过使用JavaScript提供的异常处理语句，可以用结构化的方式来捕捉发生的错误，让异常处理代码与核心业务代码实现分离。 错误与异常处理在应用中的重要性是毋庸置疑的。任何有影响力的Web应用都需要一套 完善的错误处理机制。 

try…catch 语句

try 语句标记一块待尝试的语句，如果该语句出现错误，则通过catch语句进行捕获  try{ /*可能出错的代码      类似于if     */ }catch(error){ /*在错误发生时的处理*/ }finally{ /*catch语句无法处理try语句中错误或异常时，所执行      类似于else     */ }    打印try语句中出现错误的信息  例如： try{     console.log(v) }catch(error){     console.log(error) } /*可以传error，也可以传入别的参数*/ 

throw语句

function fun(arg){ if(arg){ return arg     }else{ throw 'undefined' } } fun() /*  throw 语句 ：人为抛出错误或异常（可以是自定义的任意类型的内容）   */ ----------------------------------------------------------------------------------------- 用捕获来接收throw抛出的错误，例如： try{ fun() }catch(error){     console.log(error) /*      undefined     上面报错后,throw抛出的内容     */ } 

嵌套 try…catch语句

错误类型

执行代码期间可能会发生的错误有多种类型，每种错误都有对应的错误类型。 当错误发生时，就会抛出对应类型的错误对象。 Error是基本错误类型，其他错误类型都继承自该类型。 Error类型的错误很少见，如果有也是浏览器抛出的。 这个基本错误类型的主要目的是提供给开发人员抛出自定义错误的。  ----------------------------------------------------------------------------------------- JavaScript还提供了7种预定义的错误类型，有以下：  EvalError      表示错误的原因:与eval()有关。 InternalError  表示Javascrip引擎内部错误的异常。 RangeErcor     表示错误的原因:数值变量或参数超出其有效范围。 ReferenceError 表示错误的原因:无效引用。 SyntaxError    表示错误的原因: eval()在解析代码的过程中发生的语法错误。 TypeError      表示错误的原因:变量或参数不属于有效类型。 URIError       表示错误的原因:给encodeURI()或 decodeURI()传递的参数无效。 

this 关键字

它是一个很特别的关键字，被自动定义在所有函数的作用域中。 实际上，JavaScript中this的机制并没有那么先进，但是开发者往往会把理解过程复杂化。 不理解它的含义，大部分开发任务都无法完成。 this都有一个共同点，它总是返回一个对象。 简单说，this就是属性或方法“当前”所在的对象。 

调用位置

想要了解"this"的绑定过程，首先要理解调用位置: "调用位置"就是函数在代码中"被调用的位置(而不是声明的位置)。"  通常来说，寻找调用位置就是寻找“函数被调用的位置”。 最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。   在全局中调用，例如：  var v=100 function fun(){     console.log(this.v) } fun() /*  this指向那个对象，取决于调用的位置  此时调用的fun()，是在全局作用域中（存在一个全局对象，定义的全局变量或函数都是全局对象的属性和方法）   1、在浏览器环境中：全局对象为window，那此时fun()的调用，相当于：window.fun() 所以此时的this指向的是window对象，输出结果便为:100  2、在node.js环境中：全局对象为Global，此时的调用为：Global.fun()，此时的this指向的是Global对象， 但在node.js中Global全局对象不可直接调用，此时的输出结果便为:undefined */  在另外一个对象中当作方法来调用，例如：  var obj ={     v:200,     f:fun } obj.f() /*  输出结果为：200  此时的调用位置，是在obj对象中，被当成obj的方法来调用  所以此时的this为obj对象 */ 

绑定规则

默认绑定

在一个函数体中使用this，当该函数被独立调用。 可以把这条规则看作是无法应用其他规则时的默认规则。  function foo() { console.log( this.a ); } vara= 2; foo(); // 2  声明在全局作用域中的变量(比如var a = 2)就是全局对象的一个同名属性。 当调用foo()函数时,this.a被解析成了全局变量a。 函数调用时应用了this的默认绑定，因此this指向全局对象。 

隐式绑定

隐式绑定的规则需要考虑的是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。 当然，这种说法并不准确。  function foo() { console.log( this.a ); }var obj= { a: 2, foo: foo }; obj.foo(); // 2 调用位置会使用obj上下文来引用函数，因此你可以说函数被调用时obj对象“拥有”或者“包含”它。  

隐式丢失

隐式丢失是最常见的this绑定问题，指的就是被隐式绑定的函数会丢失绑定对象， 也就是说它会应用默认绑定，从而把this绑定到全局对象。  var v=100; /*全局变量v*/ function fn(){     console.log(this.v) } var obj={ v:200,     f:fn     /*将对象的f()方法指向fn()函数*/ } var fun=obj.f /*定义一个全局变量fun来接收，obj.f方法*/ fun() /*调用*/ /*  结果：浏览器环境中输出为：100，node.js环境中输出为：undefined  结论：此时的this指向的是全局对象，所以出现了隐式丢失  原因：虽然fun变量接受到了obj.f的方法，但只是引用赋值操作，并没有将obj.f()方法返回结果赋值，所以此时在调用fun()后，会通过obj.f的指向，去找到了fn函数，便开始执行，此时的this是间接的通过fun()调用，而fun也在全局作用域中，所以this指向的是全局对象 */ 

显示绑定

显式绑定就是明确在调用时，this所绑定的对象。 JavaScript中提供了apply()方法和call()方法实现， 这两个方法的第一个参数接收是一个对象，会把这个对象绑定到this,接着在调用函数时指定这个this。  var v=100; /*全局变量v*/ function fn(){     console.log(this.v) } var obj={ v:200,     f:fn     /*将对象的f()方法指向fn()函数*/ } var fun=obj.f /*定义一个全局变量fun来接收，obj.f方法*/ fun.apply(obj) /*结果为：200*/ /*此时通过apply或者call方法明确的传入了this绑定的对象，解决了隐式丢失，但缺点是不如隐式绑定灵活*/   如果传入了一个原始值来当作this的绑定对象，这个原始值会被转换成它的对象形式，这通常被称为“装箱” 

new 绑定

在JavaScript中，构造函数只是一些使用new操作符时被调用的函数。 包括内置对象函数在内的所有函数都可以用new来调用，这种函数调用被称为构造函数调用。 使用new来调用函数，会自动执行下面的操作:  1. 创建(或者说构造)一个全新的对象。 2.这个新对象会绑定到函数调用的this。 3.如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。  function fun(name){     this.name=name     console.log(this.name) }  var jine=new fun("jine") /*此时的this 指向的是这个jine对象 */ var person=new fun("person") /*此时的this 指向的是这个person对象 */ 

严格模式

严格模式是、JavaScript中的一种限制性更强的变种方式。 严格模式不是一个子集:它在语义上与正常代码有着明显的差异。 不支持严格模式的浏览器与支持严格模式的浏览器行为上也不一样，所以不要在未经严格模式特性测试情况下使用严格模式。 严格模式可以与非严格模式共存，所以脚本可以逐渐的选择性加入严格模式。  首先，严格模式会将JavaScript陷阱直接变成明显的错误。 其次，严格模式修正了一些引擎难以优化的错误:同样的代码有些时候严格模式会比非严格模式下更快。 第三，严格模式禁用了一些有可能在未来版本中定义的语法。  

开启严格模式

在JavaScript中想要开启严格模式，需要在所有代码之前，定义一个不会赋给任何变量的字符串: "use strict";//或者'use strict';  如果之前的JavaScript代码是非严格模式的话，建议不要盲目为这段代码开启严格模式，这样可能会出现问题。 建议按一个个函数去开启严格模式(至少在学习的过渡期要这样做)。   "注意：可以在全局作用域中开启，也可以定义在局部作用域单独开启" 

变量

意外创建变量

function fun(){  v=100  console.log(v) } fun() console.log(v) /*  在函数作用域中定义变量，且是不使用var关键字，那么其变量会自动提升为全局变量     所以在全局作用域中也可以访问v变量     这是非严格模式的问题，所以要开启严格模式来避免 */ 

静默失败转为异常

const A=3.14 var A=2  console.log(A) /*  有的环境中只会出现异常，而不是报错，所以要开启严格模式  静默失败还有好多，在非严格模式下，有的问题不会报错 */ 

禁用delet关键字

'use strict' var v=100 delete v;  console.log(v) /*  严格模式下，禁用delete关键字（仅针对删除变量，数组和对象属性不影响）  若不不开启严格模式，将不会报错，而且还会打印出100 */ 

对变量名的限制

在严格模式下，JavaScript对变量名也有限制。特别不能使用如下内容作为变量名:  implements interface let package private protected public static yield  上述内容都是保留字，在ECMAScript的下一个版本中可能会用到它们。 在严格模式下，使用上述标示符作为变量名会导致语法错误。  

对象

不可删除的属性

'use strict' delete Object.prototype console.log(Object.prototype) /*  若在非严格模式下，不会报错，但也没有删除  若在严格模式下，直接报错，所以不能删除Object.prototype   */ 

对象属性名重复

'use strict' var obj={}  Object.defineProperty(obj,'name',{     value:'jine',     writable:false,     configurable:false,     enumerable:false }) obj.name='ren' delete obj.name console.log(obj.name) /*     非严格模式下，这并不会报错，结果也还为jine，name属性并没有被修改 这也是一种静默失败例子，     严格模式下，这便会直接报错，当然name属性也是不可修改的 */ 

只读属性的赋值

'use strict' var obj={}  Object.defineProperty(obj,'name',{     value:'jine',     writable:false,     configurable:false,     enumerable:false }) obj.name='ren' console.log(obj.name) /*     非严格模式下，这并不会报错，结果也还为jine，name属性并没有被修改 这也是一种静默失败例子，     严格模式下，这便会直接报错，当然name属性也是不可修改的 */ 

不可扩展的对象

'use strict' var obj={}  Object.preventExtensions(obj) obj.name='jine' console.log(obj) /*  这也是一种静默失败，  非严格模式并不会报错，但也不会新增name属性  严格模式下，直接报错 */ 

函数

参数形参名必须唯一

'use strict' function sum(a,a,b){ return a+a+b } sum(1,2,3) /*  若不开启严格模式：，此时a取2，b取了3，结果为7  若开启严格模式，直接报错 */ 

arguments的问题

'use strict' function fun(value){     var value='jine'     console.log(arguments[0]) } fun("ren") /*          非严格模式：arguments对象获取的值与形参有关，结果为：jine（如果局部变量与形参名相同，根据就近原则进行获取）     严格模式下：arguments对象获取的值与形参无关，结果为：ren */ 

arguments.callee()方法不能调用

'use strict' function fun(){ return arguments.callee } fun() /*     非严格模式：不报错     严格模式：arguments对象无法调用callee方法 */ 

函数声明的限制

在严格模式下，只能在全局域和函数域中声明函数  'use strict' for(var i=0;i<3;i++){ var v=100     console.log(v+i) function fun(){         console.log("this is function !") } } fun() /*  *严格模式：结果为：fun is not defined，不允许在块级作用域中声明函数   *非严格模式：可以这样声明函数  */ 

eval() 函数

'use strict' eval("var v=100;") console.log(v) /*  *严格模式下：增加eval作用域，eval()函数中定义的变量只能在当前eval()函数中使用   * 非严格模式：打印结果为：100  */ 

禁止读写

在严格模式下，禁止使用eval()和arguments作为标示符，也不允许读写它们的值。  使用var声明。 赋予另一个值。 尝试修改包含的值。 用作函数名。 用作命名的函数的参数。 在try..catch语句中用作例外名。 

在严格模式下，以下的所有尝试将导致语法错误: "use strict";//开启严格模式 eval= 17; arguments++; ++eval; var obj={ set p(arguments){}}; var eval; try{ } catch (arguments){ } function x(eval) {} function arguments() {} vary = function eval() { }; varf = new Function("arguments", "'use strict; return 17;"); 

抑制 this

'use strict' var v=100; function fun(){     console.log(this.v) } var obj={     v:200 } fun() fun.call(obj) fun.call(null) fun.call(undefined) /*  非严格模式：使用apply()或call()方法，null或undefined值会被转为全局对象  严格模式：函数的this值始终是指定的值，如若使用apply()或call()方法，必须指明对象，传入null或undefined直接报错 */