跨域问题、this、修改this指向

1.跨域及解决方法

要想知道跨域，首先要知道同源策略
同源策略：URL是由端口、协议、域名和路径组成，如果两个URL的端口、协议、域名都一致，就表示他们同源
跨域：跨域就是当一个请求url的端口 、协议、域名三者有任意一个与当前页面的url`不符合，就是跨域

跨域解决方法：
jsonp： 在浏览器中，script、img、iframe、link等标签都可以加载跨域资源，而不受同源 限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。SONP就是利用script标签不受同源策略的限制，实现跨域数据的访问
另外同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。
CORS:就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

this指向

this是一个关键字，他代表函数运行时，自动生成一个内部对象，只能在函数内部使用
用法：
1.作为纯粹的函数调用，指向window

function a(){
console.log(this)   //指向window
}
a();

2.作为对象的方法调用，指向调用对象

var obj = {
name  : "张三",
fn : function(){
console.log(this)    指向obj
console.log(this.name)    指向张三
}
}
obj.fn()
;```
3.作为构造函数调用，指向新对象
所谓构造函数，就是通过这个函数生成一个新对象，这时，this就指向这个对象。

function Fn(){
this.age = 22
}
var f = new Fn();
console.log(f.age); //22

4.用apply  call  bind方法调用


5.箭头函数   
(1)默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window
(2)即使是call，apply，bind等方法也不能改变箭头函数this的指向

const obj = {
num: 10,
hello: function () {
console.log(this); obj
setTimeout(() => {
console.log(this); this指向最近的函数的this指向obj
});
}
}
obj.hello();

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

var obj = {
a : 10,
b : {
// a :12,
fn : function()
console.log(this.a); //12 b里面如果没有a 结果就是undefined
}
}
}
obj.b.fn()

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对

const obj = {
radius: 10,
diameter() {
return this.radius * 2
},
这里上下文没有函数对象，所以默认为window window里面并没有radius，所以结果为NaN
perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter()) // 20
console.log(obj.perimeter()) // NaN

## 修改this指向的方法
call、apply和bind都是修改this指向的方法
**call**:  函数.call(对象，参数1，参数2...)
未修改指向之前，this指向window

var Person = {
name: “张三”,
age: 21
}
function fn(x, y) {
console.log(x + “,” + y); //zs 20
console.log(this); //window
console.log(this.age); //undefind
}
fn(“zs”, 20);

使用call方法之后，this就指向了person

var Person = {
name = “张三”,
age = 22
}

function fn(x,y){
console.log(this) Person
console.log(this.name); 张三
console.log(this.age); 22
}
fn.call(Person,“zs”,20)

**apply** : 函数.apply(对象,[参数1，参数2....])
未修改指向之前，this指向window

var Person = {
name: “张三”,
age: 21
}
function fn(x, y) {
console.log(x + “,” + y); //zs 20
console.log(this); //window
console.log(this.age); //undefind
}
fn(“zs”, 20);

使用apply方法之后，this就指向了person

var Person = {
name = “张三”,
age = 22
}

function fn(x,y){
console.log(this) Person
console.log(this.name); 张三
console.log(this.age); 22
}
fn.apply(Person,[“zs”,20])

**call和apply的区别在于  传的参数  其他几乎一样，当参数是明确知道数量时用call；不确定的时候用apply，然后把参数push进数组传递进去，也可以通过arguments这个数组来遍历所有的参数。**

**bind方法**
bind()创建的是一个新的函数（称为绑定函数），与被调用函数有相同的函数体，当目标函数被调用时this的值绑定到 bind()的第一个参数上

语法：fun.bind(thisArgument, argument1, argument2, ...)

thisArgument：在 fun 函数运行时指定的 this 值，如果绑定函数时使用 new 运算符构造的，则该值将被忽略。
argument1, argument2, ...：指定的参数列表。

function test(){
console.log(this);
}
var obj = {
age :9
}
var s = test.bind(obj) //this指向 obj
s(); 不写这一步 bind就没有被调用 就没有效果 this就会指向window

var box = document.getElementById(“box”);
box.onclick = function () {
setTimeout(function () {
console.log(this);
}, 1000) 指向window
}

使用bind方法

var box = document.getElementById(“box”);
box.onclick = function () {
setTimeout(function () {
console.log(this);
}.bind(this), 1000) 指向div
}