前端_JavaScript_面向对象编程

摘要：面向对象编程对象的原生方法分成两类自身的方法静态方法和的实例方法。的静态方法方法与，参数是对象，返回一个数组，数组的值是改对象自身的所有属性名区别在于返回可枚举的属性，返回不可枚举的属性值。

Objects对象的原生方法分成两类：Object自身的方法(静态方法)和Object的实例方法。注意Object是JavaScript的原生对象，所有的其他对象都是继承自Object对象，故其它对象都是Object的实例。

Object.keys()方法与Object.getOwnPropertyNames()，参数是对象，返回一个数组，数组的值是改对象自身的所有属性名,——区别在于keys返回可枚举的属性，getOwnPropertyNames返回不可枚举的属性值。

Object.prototype.valueOf():返回当前对象的对应值.
Object.prototype.toString():返回当前对象对应的的字符串形式.
Object.prototype.toLocaleString(): 返回当前对象对应的的本地字符串形式.
Object.prototype.hasOwnProperety(): 判断某个属性是否为当前对象的自身属性,还是继承自原型对象
Object.prototype.isPrototypeOf(): 判断当对象是否为另一个对象的原型.
Object.prototype.propertyIsEnumerable(): 判断某个属性是否为枚举.

对象是一个容器,封装一些属性(property)和方法的集合,属性是对象的状态,方法是对象的行为.JavaScript语言的对象体系,不是基于"类"的,
而是基于构造函数(constructor)和原型(prototype).
构造函数是对象的模板,专门用来生成实例对象的函数.构造函数的首字母大写,内部使用this关键字,生成对象的时候
,必须使用new命令.
new命令: 执行构造函数,返回一个实例对象.
Object.create()创建实例对象.

this关键字: 属性和方法"当前"所在的对象,总返回一个对象.
绑定this的三种方法:
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
使用场合: 全局环境是使用this,指的是顶层对象window.在构造函数中的this,指的是实例对象

严格模式: "use strict"; 严格模式必须从代码的一开始就生效,即写在第一行.
异步操作:
浏览器的JS引擎有多个线程,每个脚本只能在一个线程上运行.采用"事件循环"机制.

垃圾回收机制:利用垃圾收集器.周期性回收那些程序中,不被其他引用所执行的变量的内存资源,多是局部变量,用完就废.
常见的二种方式: 标记清除与引用计数,标记清除,当变量进入执行环境,如声明一个变量,垃圾回收机制将其标记进入"进入环境",当这个变量离开这个环境时,函数执行结束将其标记为"离开环境",清除.引用计数跟踪每个值被使用的次数,该值得到赋值+1,该变量的值变为另外一个-1.
OOP:面向对象编程,对象是一个容器,封装了属性(Property)和方法(method).
JAVA和C++都有类的概念,而类是对象的模板,对象是类的实例,但JS不是基于"类",基于"构造函数(constructor)"和"原型链(prototype).
构造函数:

     普通的函数,函数名首字母大写.生成对象就要使用new.new的作用就是执行构造函数,返回一个实例对象.
     

对象继承:

      A对象继承B对象,拥有B对象所有的属性和方法.继承通过"原型对象prototype".

编程规范:

      行为与样式分离.命名法: 大骆驼式命名法:首字母大写.小骆驼命名法:首字母小写.
      文件资源命名: 文件名不得含有空格,全部小写,多个单单词用- 使用相对路径.如src=”//img/s.jpg”
      变量,函数使用小骆驼,构造函数使用大骆驼.常量全部大写加下划线_.尽量不使用eval()函数.
      尽量不使用var,使用const.优先使用箭头函数,只使用单引号包裹字符串,禁止使用双引号,如果字符串中包含单引号字 符,应使用模板字符串.

模块加载:

      AMD提前加载模块,不管是否调用,先解析所有模块.CMD提前加载,在真正需要时,才解析该模块
      AMD(Require.js) CMD(Sea.js) UMD(Commonjs+AMD) Common.js(Node.js) 

设计模式:

     设计模式有20多种,掌握常用四种: 单例模式,工厂模式,装饰器模式,观察者模式.

this指向:

    this是一个关键字,它用在不同的场合,但它总是返回一个对象.属性所在的当前对象是可变的,this的指向是可变的.

JavaScript的一切都是对象,运行环境也是对象,函数在某一个对象中运行时,this就是函数运行时所在的对象.但函数可以在不同执行环境运行,所以需要this执代当前的运行环境.

     三使用: 
             (1)全局环境: this执向顶层对象window.
             (2)构造函数: this执向实例对象.
             (3)对象的方法: 当对象的方法里面包含this,this的指向就是方法运行时所在的对象.该方法赋值给另一个对象时,就会改变this的指向.
     三避免:
             (1)避免多层this.
             (2)避免数组处理方法中的this.
             (3)避免回调函数中的this.
     三绑定:
             (1)call();绑定this到某对象.
             (2)apply();接受一个数组,改变this指向.
             (3)bind();绑定个某对象,返回一个新函数,

关键字: call,apply,bind this.

三个方法call,bind,apply用于将this绑定到函数,即改变this指向.区别在于调用的方式.call()立即执行函数,但需要把参数按顺序传入 .apply()会立即执行函数,但需要把所有参数组合为一个数组传入.这两个差不多,但call函数会把数字作为一个参数.
.bind()传入参数的方式与.call()相同,但是返回一个新的函数,以及对应的环境与和参数.
.toString :返回函数的字符串表示
    

执行上下文:

        当前代码的执行环境.注意当代码开始执行时,形成执行上下文栈,全局执行上下文永远在栈底,当前执行执行的函数在栈定.每个执行上下文都有三个重要属性:变量对象,作用域链,this注意js引擎开始执行js代码时,最先进入的是一个全局的执行上下文,在全局的执行上下文中每调用一个函数,就会创建一个执行上下文的内部对象(作用域),一个执行上下文定义一个函数执行环境,每次执行每次的执行上下文独一无二,多次调用创建多个.执行上下文逐次执行,直到回到全局上下文.每个函数都有不同的上下文和作用域,作用域基于函数,上下文基于对象.

作用域链:

        一个函数,我们在里面再创建一段函数,父函数调用子函数的变量叫做闭包,但形成了单个作用域链,从子函数开始不断往上查找,就是作用域链.在js中,函数也是对象,对象中有些属性我们可以访问,有些不可以.不可以访问的属性进攻js引擎存取,如scope(作用域),存储了执行上下文的集合.其中执行上下文的对象集合,呈链式链接,叫做作用域链.

严格模式:

      页面第一行声明 "use strict"; 作用:禁止一些不合理与不严禁的语法,增加报错的场合, 提高编译器的效率.
      不可对只读属性赋值(字符串长度等),函数不能有重名的参数.禁止隐式全局变量声明,禁止this执行全局,禁止删除变量.禁止使用with语句,创设eval作用域,非函数代码块不可声明函数. 

AJAX 跨域.内置对象: Object对象(首字母大写),Array,Boolean,Number,String,Math,Date,RegExp,JSON.
异步操作: 定时器和Promise对象.

异步操作:

   JavaScript只在一个线程上运行,但js引擎是多个线程.内部使用"事件循环(Event Loop)"机制.所有的任务分为同步任务和异步任务.同步任务在主线程排队,一个接着一个.异步任务:被引擎放在一边,进入任务队列的任务,不用执行完就可以执行下一步.
   任务队列: 主线程之外,用来处理当前程序处理的异步任务.异步任务可变同步,且有回调函数.

定时器:定时执行代码.主要有两个函数setTimeout()和setInterval().向任务队列添加定时任务.

Object:顶层对象是Window对象,但所有的对象都继承Object对象,即所有的对象都是Object的实例.Object的原生方法,分Object本身方法(静态方法)和实例方法.

Array:

原生对象(内置对象之一),也是一个构造函数,也可用他它生成新的数组.一个静态方法和二十个实例方法.

JSON: 一种数据交换文本格式,每个JSON对象是一个值.JSON的对值的类型和格式有严格的规定.null,空对象,空数值都是合法的JSON值
javascript内置对象JSON对象,用来处理JSON格式数据,有两个静态方法.JSON.stringify()和JSON.parse()

RegExp对象:
一种表达文本模式的方法.新建有二种.使用字面量用/包括.使用RegExp构造函数.
Date对象:
javascript原生的时间库,它以1970.1.1.00:00:00作为零点,上下可表示一亿天.
用法: 作为普通函数和构造函数 三种静态方法: Date.now() Date.parse() Date.UTC()
实例方法: ValueOf和toString,之外还有三类: to类,get类,set类.

Math对象:

内置对象,该对象不是构造函数,不能生成实例,提供各种数学功能.内置一些静态数学和方法.

包装对象:三种原始类型的值(数值,字符串,布尔值)封装的对象.内置了一些属性和方法.包装对象都从Object对象继承两个方法valueOf和toString.valueOf()方法返回包装对象实例对应的原始类型的值.toString()方法返回对应的字符串形式.

Bollean对象:

JavaScript对象作为JavaScript的三个包装对象(Number,String)之一.
用法: 作为构造函数和日常使用.

Number对象:

包装对象之一,用法二种:构造函数和工具函数.封装了一些静态属性和方法.也可自定义方法.

String对象
包装对象之一,用来生成字符串对象(很像数组的对象,但不是数组).一个静态方法,一个实例属性,十六个实例方法.方法:
parseInt()将字符串转为整数 parseFloat()将字符串转为浮点数 isNaN()判断一个值是否为NaN.
isFinite()返回布尔值,表示某个值是否为正常的数值.false有+/-Infinity NaN undefined
split() 把字符串分割为字符串数组.
Math.ceil();向上取整. Math.round();四舍五入.Math.floor();向下取整.
valueOf() 返回某个字符串对象的原始值。
concat() 连接两个或更多的数组，并返回结果。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
sort() 对数组的元素进行排序

跨域 :一个域下的文档或脚本试图去请求另一个域下的资源.(广义).浏览器同源策略限制的一类请求场景(狭义).

如: 资源跳转: A链接,重定向,表单提交.资源嵌入:等dom标签
样式中:background:url().@font-face()等文件外链.脚本请求:js发起的ajax请求,dom和js对象的跨域操作等.

跨域限制:

 服务器的一个行为,当开启对某些域名的访问限制后,只有同域或指定域名下的页面可以调用.一般情况下只在用浏览器端存在,对于服务器/ios/andriod等客户端是不存在的.

同源策略(SOP)

 它是一种约定,即"协议/域名/端口"必须相同.防止XXS,CSRF等攻击.限制了Cookie,LocalStorage和IndexDB无法读取.DOM和JS对象无法获得.AJax请求不能发送.

get请求与post请求:

  本质都是tcp协议,http的规定和浏览器与服务器的限制,在应用的过程有所不同,get产生一个tcp数据包,post产生两个数据包,GET求,浏览器会把http的header和data一并发送出去.服务器响应200(返回数据),对于post,浏览器先发header,服务器响应100 浏览器再送data,服务器响应200(返回数据).

前后端通信中ajax只支持同源策略,websocket不受同源策略影响,CRO新标准,都支持.
9种跨域解决方案
(1)jsonp跨域(2)document.domain + iframe跨域 (3)location.hash + iframe (4)window.name + iframe跨域
(5)postMessage跨域(6)跨域资源分享(CROS)(7)nginx代理跨域 (8)node中间件代理跨域(9)WebSocket协议跨域
json: javascript对象表示法,轻量级的文本数据交换格式.具有层级结构,可使用AJAX进行传输.json语法是js语法的子集,
JSONP:是json的一种"使用模式",可以让网页从别的域名获取资料.只支持GET请求,CORS支持所有类型的HTTP请求.JSONP优势在于支持老师浏览器,以及可以向不支持CORS的网站请求数据.原理是script src 本质就是一个回调函数,然后在远程服务器上调用这个函数并且将json数据形式作为参数传递,完成回调.对象格式的字符串,轻量的数据传输格式. 注意:键值需要""包起来.

 两个方法:JSON.parse 和 JSON.stringify  JSON.parse，将后台传来的字符串转化为对象。其字符串的内容就是对象才需要这个转化.
 JSON.stringify，将后台传来的对象转化为字符串。