js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)

一.跨域问题的解决方法
啥是跨域:
所有的浏览器都遵守同源策略,保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内容,防止它们互相操作。所谓同源是指协议、域名和端口都一致的情况。
js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)_第1张图片
怎么解决跨域问题:
1.第三方网站开启HTTP的Access-Control-Allow-Origin参数
只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:Access-Control-Allow-Origin: http://run.jsbin.io。如果它的值设为 * ,则表示谁都可以用:Access-Control-Allow-Origin: *
2.Web页面上调用js文件时不受是否跨域的影响(不仅如此,别人还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如script、img、iframe)

  • 静态调取js文件方式实现
    js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)_第2张图片
  • 动态调取js文件方式实现
    js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)_第3张图片
  • 动态获取callback函数
    js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)_第4张图片
  • 使用JQuery处理JSONP
    $.ajax函数判断dataType为jsonp时会自动加入callback函数,并在success中自动调取:
    js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)_第5张图片
    js重点浅谈(跨域,作用域和作用域链,闭包,原型和原型链继承)_第6张图片

二.作用域和作用域链
- 作用域:
最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

var authorName="山边小溪";
function doSomething(){
    var blogName="梦想天空";
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(authorName); //山边小溪
alert(blogName); //脚本错误
doSomething(); //梦想天空
innerSay() //脚本错误
  • 作用域链:
    在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止。
    至于为什么叫链, 可以理解为和链表有相似之处, 深层的作用域会能够访问到上层作用域, 就如同链表中两个连续节点能够单向访问一样。
var A = '蓝天';//全局作用域
function B(){   
    var C = '白云';//C位于B函数的作用域
    function D(){        
        var E = '梦想';//E位于D函数的作用域
        alert(A)    
    }
    D();
}
B();  //蓝天

三.闭包理解
指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。
我理解其实是一个作用域(scope),而这个作用域就是闭包内部的函数可以访问和修改变量的范围
特性:- 函数嵌套函数 - 函数内部可以引用外部的参数和变量 - 参数和变量不会被垃圾回收机制回收
例子:闭包中局部变量是引用而非拷贝

function say667() {  
var num = 666;  
var sayAlert = function() { alert(num); }  
num++;  
return sayAlert;  
}  
var sayAlert = say667();  
sayAlert() 
//因此执行结果应该弹出的667而非666。

四.原型和原型链继承
Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型。

// 原型链式继承:
function SuperType(){
    this.a=true;
}
SuperType.prototype.getSuperValue=function(){
    return this.a;
}

function SubType(){
    this.b=false;
}
SubType.prototype = new SuperType();//继承
SubType.prototype.getSubValue=function(){//额外添加方法
    return this.b;
}
var s = new SubType();
console.log(s.getSubValue());//false
console.log(s.getSuperValue());//true

原型链:当从一个对象那里调取属性或方法时,如果该对象自身不存在这样的属性或方法,就会去自己关联的prototype对象那里寻找,如果prototype没有,就会去prototype关联的前辈prototype那里寻找,如果再没有则继续查找Prototype.Prototype引用的对象,依次类推,直到Prototype.….Prototype为undefined(Object的Prototype就是undefined)从而形成了所谓的“原型链”。

你可能感兴趣的:(javascript,原型,继承,闭包)