JS面试题，练习题

1. 一个.php后缀的文件，可以在什么环境下执行（BC）
   A、mysql数据库 B、nginx服务器 C、apache服务器 D、windows系统
2. 同步和异步执行分别表示什么含义（A ）
   A、按顺序依次执行 和 同时分开执行
   B、同时分开执行 和 按顺序依次执行
   C、 按一致的速度执行 和 按不同的速度执行
   D、按相同的步骤执行 和 按不同的步骤执行
3. foo对象有attr属性，那么获取attr属性的值，以下哪些做法是可以的（ AB ）
   A.foo.attr B. foo[“attr”] D. foo{“attr”} D. foo[attr]
4. http协议的默认端口号是多少？C
   A、8080 B、8888 C、80 D、3306
5. ajax跨域的前端解决方案是哪个（AC ）
   A、jsonp B、cors C、服务器代理 D、服务器后台允许跨域
6. 以下程序段，执行的结果是（ C ）
   var x=-1;
   do{
   x=x*x;
   } while(!x);
   A、是死循环 B、循环执行二次
   C、循环执行一次 D、有语法错误
7. 下面不是用于创建一个新的对象的语句是（ ACD对B错 ）。
   A、 var d = new Date();
   B、 function f(){ var x=5; x++;}
   C、 var o = new Object();
   D、 var o = {title: “hello”, author: “Tom”};
8. 执行以下脚本语句在页面输出（ D ）。
   var a=3;
   a+=8*2;
   alert(a>10&&a<=20);
   A、不确定 B、null C、false D、true
9. 以下代码，哪个结果是正确的？（ A ）
   var str=‘123abc’;
   str += str.replace(‘abc’ , ‘’);
   alert(str);
   A.123abc123 B. 123abc C.123 D. abc
10. 下面语句var x= -10, y; x=2*x; y=x+15;计算后y的结果是（ C ）。
    A、-15 B、 10 C、 -5 D、 5
11. 将json字符串转换成Json对象的方法是____var obj = eval (‘ ( ‘+str+’ ) ’) ; var obj=JSON.parse(str) ; var obj = str.parseJSON( );__，将json对象转换成json格式字符串的方法是 ______ var last=obj.toJSONString( ) ; var last=JSON.stringify(obj) ;。
    特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。
12. ajax请求的核心对象是___ XHRHttpRequest对象 ___
    通过改变this指向来模拟继承的方法 ：___1.通过拓展Object类的原型对象实现继承 2.通过call方法改变指针指向实现继承3.通过apply方法改变指针指向实现继承4.通过改变对象的prototype方法实现继承
13. Jquery中获取兄弟节点的方法_____siblings( )____
14. javascript阻止事件冒泡的方法 : 1.event.stopPropagation();
    事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
    2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
    还有一种有冒泡有关的：
    3.event.preventDefault(); _______

请解释一下get请求和post请求的区别？

1.get是从服务器上获取数据，post是向服务器传送数据。g et 和 post只是一种传递数据的方式，get也可以把数据传到服务器，他们的本质都是发送请求和接收结果。只是组织格式和数据量上面有差别，http协议里面有介绍
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 因为get设计成传输小数据，而且最好是不修改服务器的数据，所以浏览器一般都在地址栏里面可以看到，但post一般都用来传递大数据，或比较隐私的数据，所以在地址栏看不到，能不能看到不是协议规定，是浏览器规定的。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。 没明白，怎么获得变量和你的服务器有关，和get或post无关，服务器都对这些请求做了封装
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 post基本没有限制，我想大家都上传过文件，都是用post方式的。只不过要修改form里面的那个type参数
5. get安全性非常低，post安全性较高。 如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到，不信你自己下一个监听网络资源的软件，
Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET"，实质上，GET和POST只是发送机制不同，并不是一个取一个发！
Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，DELETE。URL全称是资源描述符，我们可以这样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。 GET 一般用于获取/查询 资源信息，而POST 一般用于更新 资源信息。

请解释一下什么叫同源策略，以及为什么浏览器会有同源策略，什么情况下面会存在跨域问题？

引用参考地址
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源是指：域名、协议、端口相同。
同源策略又分为以下两种：
1.DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
2.XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。
为什么要有跨域限制
因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。
跨域的解决方法
从上面我们了解到了浏览器同源策略的作用，也正是有了跨域限制，才使我们能安全的上网。但是在实际中，有时候我们需要突破这样的限制，因此下面将介绍几种跨域的解决方法。
CORS（跨域资源共享）
CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。
整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
只要同时满足以下两大条件，就属于简单请求。
请求方法是以下三种方法之一：
HEAD
GET
POST
HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的。

改变this指向的方法

Call、apply和bind方法的区别是什么

// 1, call()方法
// 语法: 函数.call(参数1,其他参数....可以是多个或者没有 )
// 作用: 调用并且执行函数,同时,将函数的this指向,定义为指定的内容(参数1)
//       参数1,是改变的this的指向
//       其他参数,是原始函数的实参,原始函数有几个形参,此时就要对应的输入几个实参,没有形参,就没有实参

// 2, apply()方法
// 语法: 函数.apply(参数1,参数2)  只有两个参数
//       参数1:改变的this的指向内容
//       参数2:原始函数的实参,必须是一个数组的形式,将实参定义成数组的单元
// 其他用法和作用于 .call是相同的

// 总结: call方法与apply方法,作用,效果,都是完全一致的
//       只是对于原始函数的参数赋值方法,不同
//       call方法是通过其他多个参数来实现
//       apply方法是通过一个数组参数,来实现
//       两个方法没有本质的区别,爱用哪个用那个

// 3, bind()方法
// 语法: const 变量 = 函数.bind(参数1);
// 不是立即执行函数
// 生成一个新的函数,这个新的函数是改变this指向之后的新的函数
// 参数1,定义的要改变的的this指向
// 其他参数,一般不定义,是使用函数原有的形参

// 总结:
//     call apply 都是立即执行函数
//         参数1,都是改变的this指向
//         其他参数,是原始函数的形参(可以有,也可以没有)
//     bind 不是立即执行函数,是生成一个新的函数
//         参数1,是改变的this指向
//         就使用原始函数的形参

 $.ajax();//类方法 */
        /*  $.ajax({
          url: "data.json",
          data: { a: 1 },
          success: function (data) {
            console.log(data);
          },
        }); */


$.ajax({
          url:
            "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31727,1461,21082,32045,31322,30823&wd=duan&req=2&csor=4&pwd=dua&cb=?",
          dataType: "jsonp",
          success: (data) => {
            console.log(data);
          },
        });

## 发送 ajax 请求

- 发送 get 请求

  ```javascript
  // 直接使用 $.get 方法来发送一个请求
  /*
  	参数一： 请求地址
  	参数二： 请求时携带的参数
  	参数三： 请求成功的回调
  	参数四： 返回的数据类型
  */
  $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

• 发送 post 请求

  // 直接使用 $.post 方法来发送一个请求
  /*
  	参数一： 请求地址
  	参数二： 请求时携带的参数
  	参数三： 请求成功的回调
  	参数四： 返回的数据类型
  */
  $.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
  

• 综合发送 ajax 请求

  // 使用 $.ajax 方法
  // 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
  $.ajax({
      url: './ajax',   // 必填，请求的地址
      type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
      data: {},   // 选填，发送请求是携带的参数
      dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
      async: true,   // 选填，是否异步，默认是 true
      success () {},   // 选填，成功的回调函数
      error () {},   // 选填，失败的回调函数
      cache: true,   // 选填，是否缓存，默认是 true
      context: div,   // 选填，回调函数中的 this 指向，默认是 ajax 对象
      status: {},   // 选填，根据对应的状态码进行函数执行
      timeout: 1000,   // 选填，超时事件
  })
  

• 发送一个 jsonp 请求

  // 使用 $.ajax 方法也可以发送 jsonp 请求
  // 只不过 dataType 要写成 jsonp
  $.ajax({
      url: './jsonp.php',
      dataType: 'jsonp',
      data: { name: 'Jack', age: 18 },
      success (res) {
          console.log(res)
      },
      jsonp: 'cb',  // jsonp 请求的时候回调函数的 key
      jsonpCallback: 'fn'   // jsonp 请求的时候回调函数的名称
  })
  

  全局 ajax 函数

• 全局的 ajax 函数我们也叫做 ajax 的钩子函数

• 也就是在一个 ajax 的整个过程中的某一个阶段执行的函数

• 而且每一个 ajax 请求都会触发

ajaxStart

• 任意一个请求在 开始 的时候就会触发这个函数

  $(window).ajaxStart(function () {
      console.log('有一个请求开始了')
  })
  

ajaxSend

• 任意一个请求在 准备 send 之前 会触发这个函数

  $(window).ajaxSend(function () {
      console.log('有一个要发送出去了')
  })
  

ajaxSuccess

• 任意一个请求在 成功 的时候就会触发这个函数

  $(window).ajaxSuccess(function () {
      console.log('有一个请求成功了')
  })
  

ajaxError

• 任意一个请求在 失败 的时候就会触发这个函数

  $(window).ajaxError(function () {
      console.log('有一个请求失败了')
  })
  

ajaxComplete

• 任意一个请求在 完成 的时候就会触发这个函数

  $(window).ajaxComplete(function () {
      console.log('有一个请求完成了')
  })
  

ajaxStop

• 任意一个请求在 结束 的时候就会触发这个函数

  $(window).ajaxStop(function () {
      console.log('有一个请求结束了')
  })