extend扩展，extends继承

时间 2019-11-13

原文原文链接

相信对extend这个关键字你们都不陌生，固然extends在开发中好像碰到的更多些，今天就来和你们说说这二者的区别，不足之处欢迎你们斧（扶）正~~javascript

首先，讲讲在前端web开发中咱们用到的extend,咱们使用频率最高的jquery框架中extend但是工具函数扩展中不可或缺的关键字。html

extend有两大做用：前端

1.使用$.extend()扩展工具函数。代码展现会更直观，代码以下：vue

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>extend扩展函数</title>
 8     <script src="js/jquery.min.js"></script>
 9 </head>
10 <body>
11     <script type="text/javascript">
12         $(function(){
13             $.extend({
14                 hello:function(str){
15                     alert('hello'+str+'!')
16                 }
17             });
18             $.hello('java');
19         })
20     </script>
21 </body>
22 </html>

页面运行的结果：hello java !java

2.使用$.extend()扩展Objectnode

$.extend除了能够扩展jquery自己函数以外，另外就是扩展已有的Object对象了。一般使用的语法格式以下：react

$.extend(target,[object1],[object2].....);jquery

1 var objTotal = $.extend(obj1,obj2..);
2 $.each(objTotal,function(key,value){
3     li +="<li>"+key+":"+value+"</li>";
4 });
5 $("ul").append(li);

这就是前端开发关于extend扩展所知的两个用途，那接下来再谈谈extends这个关键字的用法。web

固然了前端vue框架同样也用到了这个关键字extend,代码以下：后端

var apple = Vue.extend({
....
})
Vue.component('apple',apple);

extends这个关键字在javaweb开发中先后端都有用到，先来说讲在前端的用法，讲到前端咱们就不能忘了大名鼎鼎的react框架，

在react中主要起的是继承做用，代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src = "node_modules/react/umd/react.development.js"></script>
    <script src = "node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src = "node_modules/babel-standalone/babel.min.js"></script>
    <title>component</title>
    <style></style>
</head>
<body>
    <div id = "example"></div>
    <script type = "text/babel">
        class HelloMessage extends React.Component{
            render(){
                return <h1>hello,{this.props.name}</h1>
            }
        };
        
        ReactDOM.render(
            <HelloMessage name = "chehl00"/>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

有没有赶脚在Vue和react中extend,extends用法很类似，这也是一种相互借鉴哦，而后实现各自功能。

而后咱们再来讲说，extends在java后端开发中的用法：

class A{
int i;
void f(){}
}
class B extends A{
int j;
void f(){}      //重写
void g(){}
}

那么，
B b = new B();
b就是子类对象的实例，不只可以访问本身的属性和方法，也可以访问父类的属性和方法。诸如b.i,b.j,b.f(),b.g()都是合法的。此时 b.f()是访问的B中的f()
A a = new B();
a虽然是用的B的构造函数，但通过upcast，成为父类对象的实例，不能访问子类的属性和方法。a.i,a.f()是合法的，而a.j,a.g()非法。此时访问a.f()是访问B中的f()

综上：extends，能够实现父类，也能够调用父类初始化 this.parent()。并且会覆盖父类定义的变量或者函数。这样的好处是：架构师定义好接口，让工程师实现就能够了。整个项目开发效率和开发成本大大下降。

extend,extends这两个关键字在开发中，仍是很重要很关键的，以上就是我今天想要和你们分享的内容。若有描述不科学，不严谨地方，欢迎指正~~~~