前端_JavaScript_面向对象编程

小灰灰 2022-03-07 01:35 244阅读 0赞

## 面向对象编程 ##

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

## Object的静态方法 ##

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

## Object的实例方法 ##

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

## Array对象 ##

对象是一个容器,封装一些属性(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引擎有多个线程,每个脚本只能在一个线程上运行.采用"事件循环"机制.

<p>

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

普通的函数,函数名首字母大写.生成对象就要使用new.new的作用就是执行构造函数,返回一个实例对象.
         <script>
            "use strict";
            var Cup = function(){ this.money= 77;};
            //
            let app = function() {this.money=100;};
          let Sun = new app(); Sun.money;//100 new 创建一个对象 用new this指向空对象,不用new this指向全局.
    
      //使用现有对象创建对象Object.create()
         var linyi = {
              naem: 'linyi',
              age:  '1000',
              do:function() {
               console.log("Hi"+this.name+".");
                             }
                      };
        let  linyi2 = Object.create(linyi);
        linyi2.name ;
         </script>

对象继承:

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本身方法(静态方法)和实例方法.<script>  
//本身的方法,直接定义在本身.  
Object.print= function () \{console.log(0)\};  
//实例方法是定义在Object的原型对象Object.prototype上的方法,它可以被Object实例直接使用.  
Object.prototype.print = function ()\{console.log(this);\}; var obj = new Object;obj.print;();  
//作为工具函数  
var obj = Object();//转换为对象  
//作为构造函数,生成新对象.  
var Obja = new Object();  
//此为有一些静态方法和实例方法.</script>

Array:

原生对象(内置对象之一),也是一个构造函数,也可用他它生成新的数组.一个静态方法和二十个实例方法.<script>
     var apple = new Array(2); arr.length;//2
     apple.isArray(arr);//true;判断是不是数组.
     var apple = [1,2,3];
     apple.valueOf();//[1,2,3]返回该值.
     apple.toString();//"1,2,3"返回数组的字符串形式.
     apple.push(1);//再数组末端添加一个或多个元素.
     apple.pop();//删除最后一个元素.
     apple.shift();//删除数组最后一个元素. 
     apple.join();//以制定参数作为分隔符,分隔数组.
     ['a'].concat(['world']);//合并数组.
     apple.reverse();//颠倒数组顺序.
     apple.slice(2,3);//提取数组返回,新数组.
     apple.splice();//删除原数组的一部分成员.
     apple.sort();//数组重新排序.
     apple.map();//将数组成员依次传入参数函数.
     apple.forEach();//将数组成员依次传入参数,但不返回值.
     apple.filter();//用于过滤数组成员.
     apple.some();//一真则真.
     apple.every();//全真才真.
     apple.reduce();//从左到右相加.
     apple.reduceRight();//从右到左想加.
     apple.indexOf();//指定数组第一次出现的位置.
     apple.lastIndexOf();//制定数组最后一次出现的位置.
    </script>

JSON: 一种数据交换文本格式,每个JSON对象是一个值.JSON的对值的类型和格式有严格的规定.null,空对象,空数值都是合法的JSON值  
javascript内置对象JSON对象,用来处理JSON格式数据,有两个静态方法.JSON.stringify()和JSON.parse()  
<script>  
//JSON.parse()将JSON字符串转换成对应的值.  
JSON.parse('\{\}')//\{\}  
//JSON.stringify()将一个值转为JSON字符串.  
JSON.stringify('abc')//""abc""  
</script>  
RegExp对象:  
一种表达文本模式的方法.新建有二种.使用字面量用/包括.使用RegExp构造函数.  
Date对象:  
javascript原生的时间库,它以1970.1.1.00:00:00作为零点,上下可表示一亿天.  
用法: 作为普通函数和构造函数 三种静态方法: Date.now() Date.parse() Date.UTC()  
实例方法: ValueOf和toString,之外还有三类: to类,get类,set类.  
<script>  
//普通函数  
Date()//直接使用,返回当前时间,加参数也没用.  
//构造函数  
let Today = new Date();  
Today; //这里返回的实例等于Today.toString()  
Today.valueOf() //返回距离零点的毫秒数===getTime  
Date.now()//返回距离零点的毫秒数  
Date.parse()//解析日期字符串.同样返回距离零点的毫秒数.解析失败,返回NaN.  
Date.UTC() //接受年,月,日等变量作为参数,返回该时间距离零点的时间.  
</script>  
Math对象:

内置对象,该对象不是构造函数,不能生成实例,提供各种数学功能.内置一些静态数学和方法.<script>
    //返回常数e ,2的自然对数,10的自然数,以2为底的e的对数,以10为底的e的对数,常数PI.0.5和2的平方根.
    Math.E; Math.LN2; Math.LN10; Math.LOG2E;Math.LOG10E;Math.PI;Math.SQRT1_2;Math.SQRT2;
    //上面的数学都是只读的,不可修改.
    //静态方法
    Math.abs(); Math.ceil(); Math.floor();Math.max();Math.min();Math.pow();Math.sqrt();
    Math.log();Math.exp();Math.round();Math.random();
    //一些三角函数方法
    Math.sin();Math.cos();Math.tan();Math.asin();Math.acos();Math.atan();</script>

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

Bollean对象:

JavaScript对象作为JavaScript的三个包装对象(Number,String)之一.
    用法: 作为构造函数和日常使用.<script>
      //作为构造函数
      let a = new Boolean(true);
      typeof a;
      a.valueOf() //true
      //日常单独使用
      Boolean(null)//false;
      Boolean(1)//true;
      !!0//false
      !![]//ture;</script>

Number对象:

包装对象之一,用法二种:构造函数和工具函数.封装了一些静态属性和方法.也可自定义方法.<script>
       //用于构造函数
       let a = new Number(1); //a为生成值为数值的对象.
       //工具函数
       Number(true) //1 将true转为1 将任何数据类型的值转为数值.
       Number.NaN//NaN
       //实例方法
       (100).toString();//"10"数字转字符串
       (100).toFixed();//转换为对应的字符串
       (222).toExponential();//转换为科学计算法
       (333).toPrecision(1);//转换为指定位数的有效数字.
                                               </script>

String对象  
包装对象之一,用来生成字符串对象(很像数组的对象,但不是数组).一个静态方法,一个实例属性,十六个实例方法.<script>  
//作为工具方法使用,将任意类型的值转为字符串  
String(true);//"trye"  
String.fromCharCode(104,101,108,108,111);//将参数值代表的Unicode码点转为字符串.  
'abcdegf'.length; //7  
let rain = new String("abcdefg");  
rain.charAt(1);//"b"返回指定位置的字符=='abcdefg'\[1\]  
rain.charCodeAt(1)//98返回指定位置字符串的Uniocde码点.无参返回首字符的码点.参数为负数或大于时,返回NaN.  
let b = new String('0101');  
rain.concat(b)//"abcdefg0101"连接两个字符串,返回一个新字符串.  
rain.slice(0,1)//"ab"返回参数截取的字符,参数为负时,倒计数.一参大二参时,返回空字符串"".  
rain.substring(0,1)//"ab"相似与slice,规则不好记,尽量不要用,用slice.  
rain.substr()//"ab"大致与slice相同,二参为截取的长度,为负时转为0.  
rain.indexOf('c')//3字符出现的位置.  
rain.lastIndexOf('c')//4从尾部开始计数位置.  
rain.trim()//去除字符串的两端的空格.  
rain.toLowerCase();//将字符串全部转为小写.  
rain.toUpperCase();//全局字符串转为大写.  
rain.math('abc');//abc返回匹配到的字符,无则null.  
rain.search('ab');//1返回匹配的第一个相符字符的位置.  
rain.serach('a','1');//'1bcdefg'替换字符  
rain.spilt('|');//\["a","b","c","d","e","f""g\]返回分割的字符串  
rain.localeComparse('banana')//比较二个字符,一大二,返回值大于0,相等返回0,小于返回小于0 </script>方法:  
parseInt()将字符串转为整数 parseFloat()将字符串转为浮点数 isNaN()判断一个值是否为NaN.  
isFinite()返回布尔值,表示某个值是否为正常的数值.false有+/-Infinity NaN undefined  
split() 把字符串分割为字符串数组.  
Math.ceil();向上取整. Math.round();四舍五入.Math.floor();向下取整.  
valueOf() 返回某个字符串对象的原始值。  
concat() 连接两个或更多的数组，并返回结果。  
pop() 删除并返回数组的最后一个元素  
push() 向数组的末尾添加一个或更多元素，并返回新的长度。  
reverse() 颠倒数组中元素的顺序。  
shift() 删除并返回数组的第一个元素  
sort() 对数组的元素进行排序  
<script>

//正则表达式
      //检验基本日期格式
      var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
      var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;
      //效验密码强度,必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。
      var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
      //校验中文,字符串仅能是中文
      var reg = /^[\\u4e00-\\u9fa5]{0,}$/;
      //由数字、26个英文字母或下划线组成的字符串
      var reg = /^\\w+$/;
      //校验E-Mail 地址
      var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/;
      //. 校验身份证号码 15或18
      var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/;
      var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/;
      //效验日期
      var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
      //. 校验金额,精确到2位小数
      var reg = /^[0-9]+(.[0-9]{2})?$/;
      //判断IE的版本
      var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;
      //校验ipv6地址
      var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;
      //校验IP-v4地址
      var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;
      //检查URL的前缀,应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后再逻辑判断。
      if (!s.match(/^[a-zA-Z]+:\/\//)) {
          s = 'http://' + s; }
      //提取url链接
      var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
      //文件路径与扩展名效验,验证windows下文件路径和扩展名（下面的例子中为.txt文件）
      var reg = /^([a-zA-Z]\\:|\\\\)\\\$[^\\]+\$*[^\\/:*?"<>|]+\\.txt(l)?$/;
      //提取Color Hex Codes,有时需要抽取网页中的颜色代码，可以使用下面的表达式。
      var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
      //提取网页图片,假若你想提取网页中所有图片信息，可以利用下面的表达式。
      var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;
      //提取页面超链接,提取html中的超链接
      var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;
      //查找CSS属性
      var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;
      //抽取注释,如果你需要移除HMTL中的注释，可以使用如下的表达式。
      var reg = //;
      //转换千分位分隔符
      return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');

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

如: 资源跳转: A链接,重定向,表单提交.资源嵌入:<link><script></script><img><frame>等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，将后台传来的对象转化为字符串。

//原生实现
      var script = document.createElement('script');
      script.type = 'text/javascript';
      //传参并指定回调执行函数为onBack
      script.src = "http://www.domain2.com:8080/login?user=admin&callback=onBack"
      document.head.appendChild(script);
      //回调函数
      function onBack(res) {
         alert({JSON.stringify(res)});
      }
      //服务器返回如下(返回时即执行全局函数)
      onBack({"status":true,"user":"admin"})
     //jqery ajax
      $.ajax({
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp', //请求方式为jsonp
        jsonpCallback: "onBack" //自定义回调函数
        data: {}
      });

//方法document.domain +iframe 仅限于主域相同,子域不同的跨域应用场景  
//两个页面都通过js强制设置document.domain为基础主域,实现同域.

//父
     <iframe id="iframe" src="http://child.domian.com/b.html"><iframe>
       document.domain = "domain.com";
       var user = 'admin';
     //子
      document.domain = 'domain.com';
      alert('get js data from paretn --->' + window.parent.user)
     //添加<script>标签的方法
    function addScriptTag(src) {
        var script = document.createElement('script');
        script.setAttribute("type", "text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }
    
    // 向后台发起请求（链接是胡乱写的）
    addScriptTag('http://www.qq.com/getJsonp?callback=jsonCallback')
     
    //jQuery ajax,逐渐退出历史舞台,基于原生的XHR开发.Ajax是用JS向服务器发送请求,并获取服务器返回的内容,整个页面并没有刷新.通常用Ajax请求JSON的格式的数据
     $.ajax({
       type: 'POST',
       url: url,
       data: data,
       dataType: dataType,
       success: function () {},
       error: function () {}
    });
    
    //axios目前主力将军,promise实现版本
    axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
            }
        })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
    
    //Fetch 未来的娇子 还需成长
    try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
    } catch(e) {
      console.log("Oops, error", e);
    }

//原生跨域请求

</script>