如何升级Jenkins

React 中的组件复用

ES5中, new了一个构造函数之后,会发生什么?

React Router v6 在非组件内，实现页面跳转

Vue2项目打包优化(webpack)

React 路由基本使用

ES5通过构造函数，模拟类的继承

vite构建vue3项目，打包优化

React Router 6 路由权限配置

## 什么是PWA

MDN官方的解释：PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。这组文档和指南告诉您有关 PWA 的所有信息。

Next.js中，主要通过`next-pwa`来实现。

## 安装

```sh
pnpm add next-pwa
```

## 配置`next.config.js`

```js

const withPWA = require('next-pwa')

const runtimeCaching = require('next-pwa/cache')


const nextConfig = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
    disable: process.env.NODE_ENV === 'development'
  },
})


module.exports = nextConfig

```

## `public`目录下新增`manifest.json`和一个`icon`目录

关于`manifest.json`我这里直接献上源码，`icon`目录里面用来放下面代码中的图标。

```json

{
  "name": "valnext",
  "short_name": "valnext",
  "theme_color": "#ffffff",
  "background_color": "#6768ab",
  "display": "fullscreen",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "splash_pages": null
}
```

## 修改`_app.tsx`中`Head`部分的代码

```tsx
<Head>
  <title>valcosmos</title>
  <link rel="shortcut icon" href="webicon.ico"/>
  <meta
    name="description"
    content="description"
  />

  <meta
    name="keywords"
    content="HTML5, CSS3, JavaScript, TypeScript, Vue, React, 前端, 个人博客"
  />

  <meta name="author" content="author"/>

  <meta
    name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no"
  />

  <meta name="theme-color" content="#6768ab" />

  <link rel="manifest" href="/manifest.json" />

  <link
    href="/icons/icon-16x16.png"
    rel="icon"
    type="image/png"
    sizes="16x16"
  />
  <link
    href="/icons/icon-32x32.png"
    rel="icon"
    type="image/png"
    sizes="32x32"
  />

  <link rel="apple-touch-icon" href="/webicon.ico"></link>

</Head>

```

至此，大功告成。

这个我是在我的博客中进行的尝试，如果有小伙伴有兴趣，可以点击下面链接，查看源码。

[https://github.com/valcosmos/valnext](https://github.com/valcosmos/valnext)

如有未尽之处，还请大家多多包涵，希望这篇文章能帮到大家，感谢！




给Nextjs应用加入PWA支持

## 下载Jenkins安装包
在Jenkins页面上根据提示下载安装包，通常为`jenkins.war`


## 进入服务器或者容器查找Jenkins目录

```sh
find / -name jenkins.war
```

通常在`/usr/share/jenkins/jenkins.war`该目录下。

## 将下载的最新包，替换查找到的旧包
以下是我自己的操作过程
```sh
# 将新包复制到Jenkins容器内部
docker ps /root/jenkins.war dacb242312bf:/root

# 进入到Jenkins目录
cd /usr/share/jenkins/

# 备份之前的旧包
mv jenkins.war jenkins.war.bk

# 讲新包复制到目录下
mv ~/jenkins.war ./

# 退出容器
exit

# 重启服务
docker restart jenkins
```

## 通过**render props**实现

- 将要复用的state和操作state的方法封装到一个组件中
- **在使用组件时，添加一个值为函数的prop，通常把这个prop命名为render，在组件内部调用这个函数。传进来的函数负责渲染UI**
- **在组件内部调用方法的时候，把状态当成参数进行传递**
### Image 组件

```tsx

import React, { Component } from 'react'

interface DemoProps {
  x: number
  y: number
}

export default class Demo extends Component<DemoProps> {
  render() {
    return (
      <img
        src={img}
        width="400px"
        style={{ position: 'absolute', left: this.props.x, top: this.props.y }}
        alt=""
      />
    )
  }
}

```

### Position 组件
```tsx

import React, { Component } from 'react'

interface PositionProps {
  x: number
  y: number
}

export default class Position extends Component<PositionProps> {
  render() {
    return (
      <>
        <h3>当前鼠标的位置</h3>
        <div>
          ({this.props.x},{this.props.y})
        </div>
      </>
    )
  }
}


```

### Render Props

```tsx

// 用于提供鼠标位置的逻辑，不负责渲染组件

import React, { Component, ReactPropTypes } from 'react'

interface MouseProps {
  render: (state: { x: number; y: number }) => React.ReactNode
}

export default class Mouse extends Component<MouseProps> {
  state = {
    x: 0,
    y: 0
  }
  move = (e: MouseEvent) => {
    this.setState({
      x: e.pageX,
      y: e.pageY
    })
  }

  componentDidMount() {
    document.addEventListener('mousemove', this.move)
  }
  componentWillUnmount() {
    document.removeEventListener('mousemove', this.move)
  }
  render() {
    return this.props.render(this.state)
  }
}


```


### 使用

```tsx

import { lazy, useState, Suspense } from 'react'
import './App.css'

const Demo = lazy(() => import('@/components/demo'))
const Position = lazy(() => import('@/components/position'))
const Mouse = lazy(() => import('@/components/mouse'))

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
        <Mouse render={({ x, y }) => <Demo x={x} y={y} />} />
        <Mouse render={({ x, y }) => <Position x={x} y={y}></Position>} />
      </Suspense>
    </div>
  )
}

export default App

```

### children代替render属性
```tsx
// scroll.tsx
import React, { Component } from 'react'

interface ScrollProps {
  children: (state: { top: number; left: number }) => React.ReactNode
}

export default class Scroll extends Component<ScrollProps> {
  state = {
    top: 0,
    left: 0
  }

  scroll = () => {
    this.setState({
      top: window.scrollX,
      left: window.scrollY
    })
  }

  componentDidMount() {
    window.addEventListener('scroll', this.scroll)
  }
  componentWillMount() {
    window.removeEventListener('scroll', this.scroll)
  }

  render() {
    return this.props.children(this.state)
  }
}

// app.tsx

<Scroll>
  {({ top, left }) => (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '1000px'
      }}
    >
      <span>
        {top}-{left}
      </span>
    </div>
  )}
</Scroll>


```


## HOC
-   高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件
-   高阶组件的命名： `withMouse` `withRouter` `withXXX`
-   高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件

**使用步骤**

-   创建一个函数，名称约定以 with 开头
-   指定函数参数（作为要增强的组件） 传入的组件只能渲染基本的UI
-   在函数内部创建一个类组件，**提供复用的状态逻辑代码**，并返回
-   在内部创建的组件的render中，需要渲染传入的基本组件，增强功能，通过props的方式给基本组件传值
-   调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

**问题**
- 可能会导致props丢失

### withMouse

```tsx
import React from 'react'
// 参数 接受一个普通组件

export default function withMouse(Base: any) {
  class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0
    }
    move = (e: MouseEvent) => {
      this.setState({
        x: e.pageX,
        y: e.pageY
      })
    }

    componentDidMount() {
      document.addEventListener('mousemove', this.move)
    }
    componentWillUnmount() {
      document.removeEventListener('mousemove', this.move)
    }

    render() {
      return <Base {...this.state} />
    }
  }

  return Mouse
}

```

### app.tsx

```tsx
const Position = lazy(() => import('@/components/position'))
const PWithMouse = withMouse(Position)

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>

        <DemoWithMouse />
        <PWithMouse />
        
      </Suspense>
    </div>
  )
}

export default App


```


## 自定义一个custom router


调用`createBrowserHistory`并导出
```js
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export default history

```

创建`custom router`

```jsx
const CustomRouter = ({ history, ...props }) => {
const [state, setState] = useState({
  action: history.action,
  location: history.location
})

useLayoutEffect(() => history.listen(setState), [history])

return (
  <Router
    {...props}
    location={state.location}
    navigationType={state.action}
    navigator={history}
  />
)
}

```

## 修改组件内的`BrowserRouter`
```jsx

 // <Router history={history}>
    <CustomRouter history={history}>
      <div className="App">
        <AuthProvider>
          {/* <Link to={'/login'}>登陆</Link>
        <Link to={'/home'}>首页</Link> */}
          {/* 配置路由的规则 */}
          <Routes>
            <Route path="/" element={<Navigate to={'/login'} />}></Route>
            <Route
              path="/home"
              element={
                <RequireAuth>
                  <Layout />
                </RequireAuth>
              }
            >
              <Route path="" element={<Home />}></Route>
              <Route path="list" element={<ArticleList />}></Route>
              <Route path="publish" element={<ArticlePublish />}></Route>
            </Route>
            <Route path="/login" element={<Login />}></Route>
            {/* 配置404组件 */}
            <Route path="*" element={<NotFound />}></Route>
          </Routes>
        </AuthProvider>
      </div>
      {/* </Router> */}
    </CustomRouter>
```

## 非组件内调用history进行跳转
```js

// 如果token过期
if (err.response.status === 401) {
  // 删除
  // removeToken()
  message.warn('登陆信息过期')

  // 跳转到登陆页面
  // window.location.href = '/login'
  history.push('/')
}
```

根据官方的例子来看，这里通过`AuthProvider` 和 `RequireAuth`实现


## AuthProvider

```jsx
import React, { useState } from 'react'
import { setToken } from 'utils/storage'

export const AuthContext = React.createContext()

export const useAuth = () => React.useContext(AuthContext)

export function AuthProvider(props) {
  let [auth, setAuth] = useState('')
  let signin = (token, cb) => {
    if (token) {
      setToken(token)
      setAuth(token)
      return cb()
    }
  }

  let signout = (cb) => {
    setAuth('')
    cb()
  }
  const value = { auth, signin, signout }
  return (
    <AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>
  )
}

```

## RequireAuth

```jsx
import { Navigate, useLocation } from 'react-router'
import { getToken } from 'utils/storage'
import { useAuth } from './AuthProvider'
export function RequireAuth({ children }) {
  let auth = useAuth()
  let location = useLocation()

  if (!auth.auth && !getToken()) {
    return <Navigate to={'/login'} stat={{ from: location }} replace></Navigate>
  }

  return children
}

```

## 路由配置

```jsx
 <Router>
      <div className="App">
        <AuthProvider>
          {/* <Link to={'/login'}>登陆</Link>
        <Link to={'/home'}>首页</Link> */}
          {/* 配置路由的规则 */}
          <Routes>
            <Route path="/" element={<Navigate to={'/login'} />}></Route>
            <Route
              path="/home"
              element={
                <RequireAuth>
                  <Layout />
                </RequireAuth>
              }
            >
              <Route path="" element={<Home />}></Route>
              <Route path="list" element={<ArticleList />}></Route>
              <Route path="publish" element={<ArticlePublish />}></Route>
            </Route>
            <Route path="/login" element={<Login />}></Route>
            {/* 配置404组件 */}
            <Route path="*" element={<NotFound />}></Route>
          </Routes>
        </AuthProvider>
      </div>
    </Router>
```

本文主要介绍React Router 6的一些基本用法
## 声明式导航

主要借助 `Link` 完成跳转
```js

import { Link, Outlet } from 'react-router-dom'


<Link to="/" style={{ paddingRight: '15px' }}>
  首页
</Link>
```

## 编程式导航

通过 `useNavigate` 完成

需要注意的是，`const navigate = useNavigate()`必须写在函数组件顶部，且不适用class组件

```js
import { useNavigate } from 'react-router-dom'

export default function Home() {
  // 编程式导航
  const navigate = useNavigate()
  const gotoList = () => {
    navigate('/list/1?name=123', {
      state: {
        url: 'hello',
        params: { a: 1 }
      }
    })
  }
  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={gotoList}>to list 1</button>
    </div>
  )
}

```

## 路由配置

```js
import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter, Routes, Route } from 'react-router-dom'

import App from './App'

import Home from './page/home'
import List from './page/list'
import ListItem from './page/list-item'
import About from './page/about'
import NotFound from './page/404'
import Login from './page/login'

// 使用history模式 -》BrowserRouter
// 使用hash模式 -》 HashRouter
// 使用native -》 NativeRouter
ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<App />}>
        <Route index element={<Home />}></Route>
        <Route path='list' element={<List />}>
          <Route path=':id' element={<ListItem />}></Route>
        </Route>
        <Route path='about' element={<About />}></Route>
        <Route path='login' element={<Login />}></Route>
      </Route>
      <Route path='*' element={<NotFound />}></Route>
    </Routes>
  </BrowserRouter >,
  document.getElementById('root')
)

```

## 子路由组件的处理

这里借助 `Outlet` 实现

```js
import { Link, Outlet } from 'react-router-dom'
import './App.css'

function App() {
  return (
    <div>
      <h1>router 6 demo</h1>
      <nav>
        <Link to="/" style={{ paddingRight: '15px' }}>
          首页
        </Link>
        <Link to="/list" style={{ paddingRight: '15px' }}>
          列表
        </Link>
        <Link to="/about" style={{ paddingRight: '15px' }}>
          关于
        </Link>
        <Link to="/login">登陆</Link>
      </nav>
      <Outlet></Outlet>
    </div>
  )
}

export default App
```

## 需要安装的包
```shell
pnpm add -D unplugin-vue-components/vite
pnpm add -D unplugin-vue-components/resolvers
pnpm add -D vite-plugin-compression

```


## 配置 ant design vue 按需导入
```js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
plugins: [
    Components({
      resolvers: [AntDesignVueResolver()]
    }),
  ]
})
```

## 开启gzip压缩
```js
import commpressPlugin from 'vite-plugin-compression'


export default defineConfig({
plugins: [
  commpressPlugin({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件
      threshold: 10240, //压缩前最小文件大小
      algorithm: 'gzip', //压缩算法
      ext: '.gz' //文件类型
    })
})
```

## nginx 开启gzip
```conf
# 开启gzip
gzip on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 1;

# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;
```

## 去除console log
```js
esbuild: {
    pure: ['console.log'],
    minify: true
  },

```

## vite.config.ts 全部代码
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import commpressPlugin from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 此处也可设置直角、边框色、字体大小等
          'primary-color': '#6768aa',
          'border-color-base': '#6768aa'
          // 'border-radius-base': '10px',
        },
        javascriptEnabled: true
      }
    }
  },
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()]
    }),
    commpressPlugin({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: false, //删除源文件
      threshold: 10240, //压缩前最小文件大小
      algorithm: 'gzip', //压缩算法
      ext: '.gz' //文件类型
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  esbuild: {
    pure: ['console.log'],
    minify: true
  },
  build: {
    // chunkSizeWarningLimit: 1000,

    rollupOptions: {
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return id
        //       .toString()
        //       .split('node_modules/')[1]
        //       .split('/')[0]
        //       .toString()
        //   }
        // }
      }
    }
  }
})

```

这个博客系统首次访问加载慢，也不是一天两天了，今天想起来就打算优化一下。几番查找之下，发现问题在于“chunk-vendors.fb88d851.js”文件。只有等这个文件加载完，页面才开始渲染，所以导致页面访问时，白屏二十几秒甚至三十几秒~（简直就是令人崩溃~~~）。

白屏的原因：
VUE等主流的单页面框架都是js渲染html body，所以必须等到vendor.js和app.css加载完成后，完整的界面才会显示。

## 解决方案：
### 1、路由懒加载
```js
// import Home from '../views/Home.vue'
// import Index from '../views/index.vue'
// import Link from '../views/link.vue'
// import Message from '../views/message.vue'
// import About from '../views/about_me.vue'

// 通过下方的方式引入组件（异步导入）

const Home = () => import('@/views/Home.vue')
const Index = () => import('@/views/index.vue')
const Link = () => import('@/views/link.vue')
const Message = () => import('@/views/message.vue')
const About = () => import('@/views/about_me.vue')
const ArticleDetail = () => import('@/views/article_detail.vue')
const TimeLine = () => import('@/views/time_line.vue')
const Project = () => import('@/views/project.vue')
```
### 2、gzip打包压缩
```shell
安装 compression-webpack-plugin：

npm install compression-webpack-plugin --save-dev
```

### 3、vue.config.js配置
```js
const CompressionPlugin = require('compression-webpack-plugin') // 引入gzip压缩插件
module.exports = {
  // 没有书写outputDir属性   默认'dist'  对应dev.assetsSubDirectory.
  assetsDir: 'static',
  productionSourceMap: false,
  // productionGzip: true,
  // productionGzipExtensions: ['js', 'css'],
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
  },
  configureWebpack: config => {
    // npm install terser-webpack-plugin -D， 去掉console
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    return {
      plugins: [
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css/,
          threshold: 10240,
          deleteOriginalAssets: false
        })
      ],
      externals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT',
        axios: 'axios',
        'highlight.js': 'hljs',
        'vue-bus': 'VueBus',
        nprogress: 'NProgress'
      }
    }
  }
}
```

### 4、index.html引入cdn
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-light.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong>
    </noscript>
    
    <div id="app"></div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  </body>
</html>
```
### 5、nginx配置
```conf
#开启gzip模式
gzip on;
    
#gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
    
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 9;
    
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
    
#nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on;
    
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 2 4k;
```

-  开辟一个内存空间, 实例化一个空对象
-  改变this的指向
-  将属性与方法赋给创建的对象
-  返回这个对象

```js
function Father(uname, age) {
   this.name = uname
   this.age = age
}
Father.prototype.fly = function () {
   console.log('I can fly')
}
function Son(uname, age, score) {
   Father.call(this, uname, age)
   this.score = score
}
Son.prototype = new Father()
Son.prototype.constructor = Son
Son.prototype.exam = function () {
   return 'I am better'
}
var son = new Son('aa', 11, 11)
console.log(son)
console.log(son.exam)
```
- 构造函数的方法,一般需要放在原型对象上,这样可以共享方法,避免内存泄漏, 因为每实例化一个对象,就会开辟一块内存空间.
- 继承属性,主要通过在子构造函数中,调用父构造函数,并且改变父构造函数的指向来实现,以此可以继承父构造函数的属性
- 继承方法,主要通过将父类实例化后,将其赋值给子构造函数的原型对象,即可获得父类中的方法.(对原型对象赋值之后,一定要将constructor属性重新赋值)
- -- 这里不能将  夫构造函数的原型对象直接赋值给子构造函数,那样在子构造函数所具备的方法,会同步到父构造函数上