Web前端学习之Javascript继承的常用4种方法

今天小编要跟大家分享的文章是关于Javascript继承的常用4种方法。相信很多学习web前端开发技术的小伙伴在学习前端开发的javascript部分的时候，在面向对象的部分就很难走下去了，主要的原因还是逻辑更加复杂了，需要理解的内容比直观的开发布局难一点。

创新互联建站于2013年开始，先为卧龙等服务建站，卧龙等地企业，进行企业商务咨询服务。为卧龙企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

在面向对象编程里，封装和继承是比较重要的，这中间，继承是相对而言比较难理解的，因为javascript的继承方式比较多，也有不同的优缺点。今天小编为大家带来这篇文章就是来和大家一起说一说Javascript继承的常用4种方法，希望能够对你有所帮助。

1、原型链继承

核心：将父类的实例作为子类的原型

缺点：父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了

2、构造继承

基本思想

借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。

因为this对象是在运行时基于函数的执行环境绑定的。也就是说，在全局中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。

call、apply方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

所以，这个借用构造函数就是，new对象的时候(new创建的时候，this指向创建的这个实例)，创建了一个新的实例对象，并且执行Parent里面的代码，而Parent里面用call调用了Person，也就是说把this指向改成了指向新的实例，所以就会把Person里面的this相关属性和方法赋值到新的实例上，而不是赋值到Person上面,所以所有实例中就拥有了父类定义的这些this的属性和方法。

因为属性是绑定到this上面的，所以调用的时候才赋到相应的实例中，各个实例的值就不会互相影响了。

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类(没用到原型)

缺点：方法都在构造函数中定义，

只能继承父类的实例属性和方法，不能继承原型属性/方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、组合继承

组合继承(所有的实例都能拥有自己的属性，并且可以使用相同的方法，组合继承避免了原型链和借用构造函数的缺陷，结合了两个的优点，是最常用的继承方式)

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后再通过将父类实例作为子类原型，实现函数复用

缺点：调用了两次父类构造函数，生成了两份实例(子类实例将子类原型上的那份屏蔽了)

4、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

缺点：堪称完美，但实现较为复杂

以上就是小编今天为大家分享的关于web前端学习之Javascript继承的常用4种方法的文章，希望本篇文章能够对正在学习web前端技术的小伙伴们有所帮助。想要了解更多web前端知识记得关注北大青鸟web培训官网。

文章转载自公众号：前端研究所

Javascript跨域请求的4种解决方式

什么情况下才会出现跨域？

假设域名是：

如果所请求的域名跟这个域名不致，这种情况就是跨域，由于跨域存在漏洞，所以一般来说正常的跨域请求方式是请求不到的。

解决方式：

一、window.name

1、

服务器返回

复制代码

代码如下:

scriptwindow.name='{"id":"3",

"name":"leisure"}';/script

2、定义一个iframe，添加onload事件

iframe

id="iframe1"

onload="iLoad"iframe

script

type="text/javascript"

var

load

=

false;

function

iLoad()

{

if(load

==

false)

{

//

同域处理，请求后会再次重新加载iframe

document.getElementById('iframe1').contentWindow.location

=

'/';

load

=

true;

}

else

{

//

获取window.name的内容，注意必须进行同域处理后方可访问！

var

data

=

document.getElementById('iframe1').contentWindow.name;

alert(data);

//

{"id":"3",

"name":"leisure"}

load

=

false;

}

}

/script

3、定义一个form，设置form的target为iframe的id，然后提交form

复制代码

代码如下:

form

action="url"

method="POST"

target="iframe1"

button

type="submit"

value="submit"

/

/form

二、JSONP

服务器返回

callback({"id":

"3",

"name":

"leisure"});

复制代码

代码如下:

script

type="text/javascript"

function

callback(data)

{

alert(data);

}

/script

script

type="text/javascript"

src=";jsonp=callback"/script

三、jQuery.getJSON

服务器返回

json格式数据

test({"id":

"3",

"name":

"leisure"});

test函数名为callback参数中定义

复制代码

代码如下:

$.getJSON(url

+

"?callback=?",

data,

function(data)

{

}

注意callback=?这个参数必须带上，jquery会自动生成一个函数名替换这个问号！jQuery.getJSON实际上是用了JSONP方式实现。

四、flash跨域

服务器添加crossdomain.xml

复制代码

代码如下:

?xml

version="1.0"?

cross-domain-policy

allow-access-from

domain="*.another.com.cn"

/

/cross-domain-policy

javascript五种基本类型怎么记

javascript五种基本类型记的方法分别是：

1、string : 数据外面有 ‘’ 或者 “” 把类型归类为字符串!; 可以表达任意数据，或者说任何类型数据都可以用字符串的形式表示。

2、number : 数字 （没有整形和浮点型的区别：整数和小数都是number类型,）。

3、 boolean :只有两个表达值： true为真 , false 为假一般用作程序逻辑的判断，控制程序的流程。

4、undefined : 变量声明未赋值的时候,计算机默认变量值为 undefined。

5、null (空) : 可以通过将变量的值设置为 null 来清空变量。

JavaScript基本数据类型有：

1、数值类型：与强类型语言如C、Java不同，JavaScript的数值类型不仅包括所有的整形变量，也包括所有的浮点型变量。JavaScript语言中的数值都是以IEEE 754双精度浮点数格式保存。

2、字符串类型：JavaScript的子串富川必须用引号括起来，此处的引号既可以是单引号，也可以是双引号。

javascript有哪几种数据类型

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Javascript的数据类型有：

1. Number 数字类型

2. String 字符串类型

3. Boolean 布尔类型

4. Function 函数

5. Object 对象

6. Null

7. Undefined 没有定义类型

网站名称：关于4种javascript的信息
分享URL：http://kswjz.com/article/dscjeoe.html