(一) 安裝

yarn add leaflet

(二) 使用

(1) 在index.html中添加地圖顯示的容器

index.html

<div id="map" style="width:1000px; height:700px; display:block; margin: 10px"></div>




也可以把leaflet的css文件引入index.html ----- 則在js頁(yè)面不引入
<link rel="stylesheet"  integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" />

(2) 引入并使用

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import L from 'leaflet';                     // 引入leaflet js
import 'leaflet/dist/leaflet.css';           // 引入leaflet css

class App extends Component {
  constructor(props) {
    super(props)
    this.map = null                          // 初始化map屬性
  }
  componentDidMount() {
    const MAP = this.map = L.map('map', {    // 加載leaflet中心類   --- map類
      center: [39.9788, 116.30226],          // L.map(容器id, 配置項(xiàng) )
      zoom: 18
    })

    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      subdomains: "1234",
      attribution: '高德地圖'
    }).addTo(this.map);                 // 把瓦片圖層添加到map上茸习，map需要加載地圖圖層藕施，即顯示的內(nèi)容

  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
      </div>
    );
  }
}

export default App;

22222.jpg

map 常用配置項(xiàng)

    const MAP = this.map = L.map('map', {   // L.map(DOM, options)
      center: [39.9788, 116.30226],    // 初始化地圖的地理中心
      zoom: 18,                        // 縮放
      zoomControl: true,               // 縮放控制開(kāi)啟和關(guān)閉
      attributionControl: true,        // 屬性控制，可以通過(guò) L.tileLayer().getAttribution()得到
      dragging: true,                  // 拖動(dòng)控制
      layers: [tileX],                 // 初始化加載的圖層     ---- 重要重要重要
      maxZoom: 18,                     // 最大縮放
      minZoom: 1,                      // 最小縮放
      crs: L.CRS.EPSG3857,      //要使用的坐標(biāo)參考系統(tǒng)供置，默認(rèn)的坐標(biāo)參考系,互聯(lián)網(wǎng)地圖主流坐標(biāo)系
     // crs: L.CRS.EPSG4326,    //WGS 84坐標(biāo)系，GPS默認(rèn)坐標(biāo)系
    })


     crs 是 Coordinate Reference System 的縮寫(xiě)   -------  坐標(biāo)參考系統(tǒng)

TileLayer常用配置項(xiàng)

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}{r}.png?{foo}', {foo: 'bar'}).addTo(..)

{s}:       subdomains 表示可用的子域
{z}:       zoom 表示縮放
{x}, {y}:  tile coordinates 表示坐標(biāo)
{r} :      can be used to add "@2x" to the URL to load retina tiles

L.tileLayer(url, options)

const tileX = L.tileLayer(url, {
   subdomains: "1234",
   attribution: '高德地圖'
 });

marker，popup妻枕，tooltip

    const marker = L.marker([39.9788, 116.30226]).addTo(this.map);  // 添加marker到地圖

    marker.bindPopup('點(diǎn)擊marker,顯示popup')   // 給marker綁定Popup，點(diǎn)擊marker時(shí)顯示

    marker.bindTooltip("my tooltip text")    // 給marker綁定tooltip粘驰，hover時(shí)顯示

    const marker2 = L.marker([39.9790, 116.30248], {    // marker的屬性配置
      title: '這是marker2的title',
      icon:L.icon({                         // 更換maker的圖標(biāo)
        iconUrl: 'my-icon.png',
        iconSize: [38, 95],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76],
        shadowUrl: 'my-icon-shadow.png',
        shadowSize: [68, 95],
        shadowAnchor: [22, 94]
      })
    }).addTo(this.map)

circle屡谐，polyline，polygon多邊形蝌数，rectangle矩形

   L.circle([39.9788, 116.30226], {radius: 50}).addTo(this.map);        // 圓

    var latlngs = [
      [39.9790, 116.30248],
      [39.9790, 116.30270],
      [39.9793, 116.30270],
      [39.9790, 116.30290],
    ];
    var latlngs2 = [
      [39.9790, 116.30208],
      [39.9790, 116.30250],
      [39.9793, 116.30250],
      [39.9790, 116.30208],
    ];
    var latlngs3 = [
      [45.51, -122.68],
      [37.77, -122.43],
      [34.04, -118.2]
  ];
  var polyline = L.polyline(latlngs, {color: 'red'}).addTo(this.map);      // 線條
  this.map.fitBounds(polyline.getBounds());               //填充邊界愕掏，定位地圖
 
  var latlngs = [latlngs];
  var polygon = L.polygon(latlngs2, {color: 'green'}).addTo(this.map);   // 多邊形
  this.map.fitBounds(polygon.getBounds());

  var polyline = L.polyline(latlngs3, {color: 'red'}).addTo(this.map);



 // define rectangle geographical bounds     
 // geographical 地里的
 var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
 // create an orange rectangle
 L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
 // zoom the map to the rectangle bounds
 map.fitBounds(bounds);

添加圖片做為地圖

let imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
let imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];  
// 注意： bounds是邊界，是 ( southWest ) 和 ( northEast ) 的值

L.imageOverlay(imageUrl, imageBounds).addTo(map);

獲取用戶當(dāng)前的位置信息

地理位置 API 通過(guò) navigator.geolocation 提供

• navigator.geolocation 獲取地理位置
• getCurrentPosition 函數(shù)獲取用戶當(dāng)前定位位置顶伞。

 const xyz = navigator.geolocation.getCurrentPosition((x) => {
    const xi = x.coords.latitude;
    const yi = x.coords.longitude;
    L.marker([xi, yi]).addTo(MAP);   // 用marker顯示在地圖上
 });

切換不同圖層

class App extends Component {
  constructor(props) {
    super(props);
    this.map = null
  }
  componentDidMount() {

    const gaode = L.tileLayer('...', {
      subdomains: "1234",
      attribution: '高德地圖'
    })

    const mapbox = L.tileLayer( '...', {
      attribution: '谷歌地圖',
      subdomains: "1234",
    })

    var mymap = this.map = L.map('map', {
      center: [39.9788, 116.30226],
      zoom: 18,
      layers: [mapbox],
      drawControl: true
    })

    L.control.layers({            // L.control.layers
      '高德地圖': gaode,
      '谷歌地圖': mapbox,
    }).addTo(this.map)
}

把GeoJSON中的 coordinates 轉(zhuǎn)換成 LatLng

    const aaa = [39.9788, 116.30226];
    const bbb = L.GeoJSON.coordsToLatLng(aaa);
    console.log(bbb)     
    // LatLng {lat: 116.30226, lng: 39.9788}


    const ccc = L.GeoJSON.latLngToCoords(bbb);
    console.log(ccc)
    // [39.9788, 116.30226]
  

GeoJSON對(duì)象

GeoJSON是一種對(duì)各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式饵撑。
GeoJSON對(duì)象可以表示幾何、特征或者特征集合唆貌。(geometry, feature, featureCollection
GeoJSON支持這幾種 幾何類型：點(diǎn)滑潘、線、面挠锥、多點(diǎn)众羡、多線、多面和幾何集合蓖租。
GeoJSON里的特征包含一個(gè)幾何對(duì)象和其他屬性粱侣，特征集合表示一系列特征。

• GeoJSON對(duì)象必須由一個(gè)名字為"type"的成員蓖宦。這個(gè)成員的值是由GeoJSON對(duì)象的類型所確定的字符串齐婴。
  type成員的值必須是下面之一："Point"點(diǎn), "MultiPoint"多點(diǎn), "LineString", "MultiLineString", "Polygon", "MultiPolygon", "GeometryCollection"幾何集合, "Feature", 或者 "FeatureCollection"特征集合
• GeoJSON對(duì)象可能有一個(gè)可選的"crs"成員，它的值必須是一個(gè)坐標(biāo)參考系統(tǒng)的對(duì)象
  crs 是 Coordinate Reference System 的縮寫(xiě) ------- 坐標(biāo)參考系統(tǒng)
• GeoJSON對(duì)象可能有一個(gè)"bbox"成員稠茂，它的值必須是邊界框數(shù)組
  boundary邊界

(1) 幾何對(duì)象 geometry

geometry對(duì)象包含 ( type屬性 ) 和 ( coordinates屬性 - 總是數(shù)組 )

• 幾何是一種GeoJSON對(duì)象稻艰，這時(shí)type成員的值是下面字符串之一："Point", "MultiPoint", "LineString", "MultiLineString", "Polygon", "MultiPolygon", 或者"GeometryCollection"肋乍。

• 除了“GeometryCollection”外的其他任何類型的GeoJSON幾何對(duì)象必須由一個(gè)名字為"coordinates"的成員。coordinates成員的值總是數(shù)組。這個(gè)數(shù)組里的元素的結(jié)構(gòu)由幾何類型來(lái)確定途事。

(2) 位置 coordinates

coordinates 總是數(shù)組 (數(shù)組或者嵌套數(shù)組)

• 位置是基本的幾何結(jié)構(gòu)。幾何對(duì)象的"coordinates"成員由一個(gè)位置（這兒是幾何點(diǎn)）须鼎、位置數(shù)組（線或者幾何多點(diǎn)）哀卫，位置數(shù)組的數(shù)組（面、多線）或者位置的多維數(shù)組（多面）組成丐箩。

• 位置由數(shù)字?jǐn)?shù)組表示摇邦。必須至少兩個(gè)元素恤煞，可以有更多元素。元素的順序必須遵從x,y,z順序（投影坐標(biāo)參考系統(tǒng)中坐標(biāo)的東向施籍、北向居扒、高度或者地理坐標(biāo)參考系統(tǒng)中的坐標(biāo)長(zhǎng)度、緯度丑慎、高度

(3) 特征對(duì)象 Feature

Feature對(duì)象必須包含 ( geometry屬性 ) 和 ( properties屬性 )

類型為"Feature"的GeoJSON對(duì)象是特征對(duì)象喜喂。

• 特征對(duì)象必須由一個(gè)名字為"geometry"的成員，這個(gè)幾何成員的值是上面定義的幾何對(duì)象或者JSON的null值立哑。
• 特征對(duì)戲那個(gè)必須有一個(gè)名字為“properties"的成員夜惭，這個(gè)屬性成員的值是一個(gè)對(duì)象（任何JSON對(duì)象或者JSON的null值）。
• 如果特征是常用的標(biāo)識(shí)符铛绰，那么這個(gè)標(biāo)識(shí)符應(yīng)當(dāng)包含名字為“id”的特征對(duì)象成員诈茧。

(4) 特征集合對(duì)象 FeatureCollection

FeatureCollection對(duì)象必須包含 ( features屬性 )，是一個(gè)數(shù)組

類型為"FeatureCollection"的GeoJSON對(duì)象是特征集合對(duì)象捂掰。

• 類型為"FeatureCollection"的對(duì)象必須由一個(gè)名字為"features"的成員敢会。與“features"相對(duì)應(yīng)的值是一個(gè)數(shù)組。這個(gè)數(shù)組中的每個(gè)元素都是上面定義的特征對(duì)象

{ "type": "FeatureCollection",   // GeoJSON對(duì)象必須有個(gè)type屬性这嚣，這里值是 特征集合
  "features": [
    { "type": "Feature",      // Feature<Point>
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},  // Geometry<Point>
      "properties": {"prop0": "value0"}
      },
    { "type": "Feature",    // 線數(shù)據(jù)
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
          ]
        },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",   // 多邊形數(shù)據(jù)
         "coordinates": [
           [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
             [100.0, 1.0], [100.0, 0.0] ]
           ]
       },
       "properties": {
         "prop0": "value0",
         "prop1": {"this": "that"}
         }
       }
     ]
   }

// 2018.6.9更 -------------- // 復(fù)習(xí)面向?qū)ο?/p>

        // 構(gòu)造函數(shù)
            // 1. 首字母大寫(xiě)
            // 2. 函數(shù)內(nèi)部使用this代表將要生成的實(shí)例對(duì)象
            // 3. 使用new命令鸥昏，執(zhí)行構(gòu)造函數(shù)，返回實(shí)例對(duì)象
        
        // 忘記寫(xiě) new命令
            // 在構(gòu)造函數(shù)內(nèi)部使用 'use strict'嚴(yán)格模式姐帚，在忘記new命令時(shí)吏垮，就會(huì)報(bào)錯(cuò)

        // return 
            // 構(gòu)造函數(shù)內(nèi)部，如果有return語(yǔ)句罐旗，
                // 1. return 后面跟一個(gè)對(duì)象膳汪，new命令就會(huì)返回該對(duì)象
                // 2. return 后滿跟的不是一個(gè)對(duì)象， new就會(huì)返回this指代的實(shí)例對(duì)象

        // 對(duì)普通函數(shù)使用new命令九秀，return后面跟的不是對(duì)象遗嗽，會(huì)返回一個(gè)空對(duì)象

        // new命令總是返回一個(gè)對(duì)象，實(shí)例對(duì)象鼓蜒，或者return 指定的對(duì)象痹换， 普通函數(shù)使用new命令，返回空對(duì)象或者return 指定的對(duì)象

        // Object.create() 創(chuàng)建實(shí)例對(duì)象
            // 1.構(gòu)造函數(shù)為模板都弹，可以生成實(shí)例對(duì)象娇豫，但有時(shí)，拿不到實(shí)例對(duì)象畅厢，只能通過(guò)現(xiàn)有的對(duì)象為模板锤躁，生成實(shí)例對(duì)象

        // ------------------------------------------------
        
        // this
            // this不管用在什么場(chǎng)合，都是返回一個(gè)對(duì)象

            // this是屬性和方法當(dāng)前所在的對(duì)象
                // 對(duì)象的屬性可以賦值給另一個(gè)對(duì)象，所以系羞，屬性所在的當(dāng)前對(duì)象是可變的，即 this的指向是可變的
                
            // 只要函數(shù)被賦值給另一個(gè)變量霸琴，this的指向就會(huì)變
            
            // 總結(jié)
                // this是函數(shù)運(yùn)行時(shí)所在的對(duì)象 ＝氛瘛！Ｎ喑恕澎迎！
                    // 在js中一切皆對(duì)象，運(yùn)行環(huán)境也是對(duì)象选调，所以夹供，函數(shù)都在某個(gè)對(duì)象中運(yùn)行
                    // this就是函數(shù)運(yùn)行時(shí)所在的對(duì)象

            // this的使用場(chǎng)合
                // 1.全局環(huán)境
                    // 全局環(huán)境使用this, this指的是頂層對(duì)象，即window對(duì)象
                // 2.構(gòu)造函數(shù)
                    // 在構(gòu)造函數(shù)中仁堪，this指向?qū)⒁傻膶?shí)例對(duì)象
                // 3.對(duì)象的方法
                    // 在對(duì)象的方法中哮洽，this指向方法運(yùn)行時(shí)，所在的對(duì)象
            // 注意
                // 如果this所在的方法不在對(duì)象的第一層弦聂，this只是指向當(dāng)前一層的對(duì)象鸟辅，而不會(huì)繼承更上面的層 ！莺葫！
                
                // 如果匪凉，將嵌套對(duì)象內(nèi)部的方法賦值給一個(gè)變量，this依然會(huì)指向全局對(duì)象window 

                // 嵌套的this
                    // 使用一個(gè)變量固定this的值捺檬，然后內(nèi)層函數(shù)調(diào)用這個(gè)變量再层，是非常常見(jiàn)的做法

            // Function.prototype.call(參數(shù)1， 參數(shù)2堡纬， ....)
                // 函數(shù)實(shí)例的call方法聂受，可以指定函數(shù)內(nèi)部this的指向，然后在所指定的作用域中隐轩，調(diào)用該函數(shù)

                // call()方法的參數(shù)是一個(gè) 對(duì)象饺饭， 如果參數(shù)是空，null, undefined职车，則默認(rèn)傳入全局對(duì)象

                // call()方法可以傳入多個(gè)參數(shù)瘫俊，第一個(gè)參數(shù)是所要綁定的對(duì)象，后面的參數(shù)是函數(shù)調(diào)用時(shí)傳入的參數(shù)

                // call()方法會(huì)自動(dòng)調(diào)用函數(shù) ---- bind()方法則不會(huì)自動(dòng)調(diào)用

            // Function.prototype.apply(參數(shù)1悴灵， [參數(shù)2扛芽， 參數(shù)3 ， ...])    
                // apply方法的作用與call方法類似积瞒，也是改變this指向川尖，然后再調(diào)用該函數(shù)。
                // 唯一的區(qū)別就是茫孔，它接收一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù)

            // Function.prototype.bind(參數(shù)1叮喳， 參數(shù)2被芳， ....)
                // bind方法用于將函數(shù)體內(nèi)的this綁定到某個(gè)對(duì)象，然后返回一個(gè)新函數(shù)
    

算法：

1. 找出數(shù)組中最大的元素

var a = [1,11,111,30,40];
const b = Math.max.apply(null, a);   // Math.max() 是一個(gè)函數(shù)
console.log(b) // 111

Function.prototype.apply(需要綁定的對(duì)象馍悟，數(shù)組參數(shù)) // 第一個(gè)參數(shù)時(shí)null和undefined時(shí)畔濒，綁定全局對(duì)象

2. 將數(shù)組的 ( 空元素 ) 替換成 ( undefined )

Array.apply(null, ['a', ,'b'])

// [ 'a', undefined, 'b' ]

prototype對(duì)象

1. 構(gòu)造函數(shù)的缺點(diǎn)
   同一個(gè)構(gòu)造函數(shù)的多個(gè)實(shí)例，無(wú)法共享屬性锣咒。(造成系統(tǒng)資源的浪費(fèi))
   構(gòu)造函數(shù)的屬性和方法都會(huì)生成在實(shí)例對(duì)象上

   const A = function() {
     this.name = function() {
        console.log('not equal')
      }
    };
    const b = new A();
    const c = new A();
    console.log(b.name === c.name)  // false

  // 構(gòu)造函數(shù)的name方法侵状，會(huì)定義在實(shí)例對(duì)象上，即 每個(gè)實(shí)例都會(huì)生成name方法

2. 原型對(duì)象prototype
   原型對(duì)象的所有屬性和方法都能被實(shí)例對(duì)象所共享

3. js規(guī)定毅整，每一個(gè)函數(shù)都有一個(gè)prototype屬性趣兄，指向一個(gè)對(duì)象
   對(duì)于普通函數(shù)來(lái)說(shuō)，該屬性基本無(wú)用悼嫉。但是艇潭，對(duì)于構(gòu)造函數(shù)來(lái)說(shuō)，生成實(shí)例的時(shí)候承粤，該屬性會(huì)自動(dòng)成為實(shí)例對(duì)象的原型暴区。

• 對(duì)于構(gòu)造函數(shù)來(lái)說(shuō)，構(gòu)造函數(shù)的prototype屬性辛臊，會(huì)在構(gòu)造函數(shù)生成實(shí)例對(duì)象的時(shí)候仙粱，自動(dòng)成為實(shí)例對(duì)象的原型對(duì)象！３菇ⅰ伐割！
  // 對(duì)于構(gòu)造函數(shù)，prototype屬性會(huì)在生成實(shí)例對(duì)象的時(shí)候刃唤，成為實(shí)例對(duì)象的原型對(duì)象
  // 原型對(duì)象的屬性和方法隔心，被實(shí)例對(duì)象所共享
• 原型對(duì)象的屬性不是實(shí)例對(duì)象自身的屬性。只要修改原型對(duì)象尚胞，變動(dòng)就立刻會(huì)體現(xiàn)在所有實(shí)例對(duì)象上硬霍。
• 當(dāng)實(shí)例對(duì)象本身沒(méi)有某個(gè)屬性或方法的時(shí)候，它會(huì)到原型對(duì)象去尋找該屬性或方法笼裳。
  如果實(shí)例對(duì)象自身就有某個(gè)屬性或方法唯卖，它就不會(huì)再去原型對(duì)象尋找這個(gè)屬性或方法。

總結(jié)： 原型對(duì)象的作用就是定義所有實(shí)例對(duì)象所共享的屬性和方法躬柬，這也是它被稱為原型對(duì)象的原因拜轨，而實(shí)例對(duì)象可以視作從原型對(duì)象衍生出來(lái)的子對(duì)象。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';   // 任何函數(shù)的prototype屬性都指向一個(gè)對(duì)象

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

// 對(duì)于構(gòu)造函數(shù)允青，prototype屬性會(huì)在生成實(shí)例對(duì)象的時(shí)候橄碾，成為實(shí)例對(duì)象的原型對(duì)象
// 原型對(duì)象的屬性和方法，被實(shí)例對(duì)象所共享

原型鏈

1. JavaScript 規(guī)定，所有對(duì)象都有自己的原型對(duì)象（prototype）法牲。
   一方面史汗，任何一個(gè)對(duì)象，都可以充當(dāng)其他對(duì)象的原型拒垃；
另一方面淹办，由于原型對(duì)象也是對(duì)象，所以它也有自己的原型恶复。
因此，就會(huì)形成一個(gè)“原型鏈”（prototype chain）：對(duì)象到原型速挑，再到原型的原型……
2. 如果一層層上溯谤牡，所有對(duì)象的原型最終可以上溯到Object.prototype
   ( 即Object構(gòu)造函數(shù)的prototype屬性 )

• 所有對(duì)象都繼承了Object.prototype屬性上的 屬性和方法
  這就是所有對(duì)象都有valueOf和toString方法的原因，因?yàn)檫@是從Object.prototype繼承的姥宝。
• Object.prototype的原型是null翅萤，由于null沒(méi)有任何屬性，所以原型鏈到此為止腊满。

3.讀取屬性時(shí)套么，如果本身對(duì)象沒(méi)有該屬性，就是上溯到該對(duì)象的原型對(duì)象上尋找碳蛋，如果還沒(méi)有胚泌，就一個(gè)向上到Object.prototype，如果還沒(méi)有就返回 undefined

4.自身和原型有同名屬性時(shí)肃弟，優(yōu)先讀取自身對(duì)象上的屬性 ------ 這叫做"覆蓋"玷室。

5. constructor 屬性

prototype對(duì)象默認(rèn)有一個(gè)constructor屬性，指向prototype對(duì)象所在的構(gòu)造函數(shù)

function P() {}
P.prototype.constructor === P // true

• constructor屬性定義在prototype對(duì)象上笤受，因此穷缤，可以被實(shí)例對(duì)象所繼承

const A = function() {
   console.log('這是一個(gè)構(gòu)造函數(shù)')
};
const b = new A();

console.log( A.prototype.constructor === b.constructor );  //true
console.log( A.prototype.constructor === A);  //true
console.log( b.constructor === A);   //true
console.log( b.hasOwnProperty('constructor'));  // false ------- 不是自身屬性

6. constructor屬性的作用

• 1.constructor屬性的作用，可以得知箩兽，實(shí)例對(duì)象到底是由哪個(gè)構(gòu)造函數(shù)產(chǎn)生的
• 2. 有了constructor津肛，就可以從一個(gè)實(shí)例對(duì)象新建另一個(gè)實(shí)例對(duì)象

     const A = function() {
         console.log('這是構(gòu)造函數(shù)A');
     };

     const b = new A();

     const c = new b.constructor();    // b.constructor === A === A.prototype.constructor

     console.log( c instanceof A );     // c 是 A 的實(shí)例    ----- 注意 instanceof 是小寫(xiě) of

• 修改原型對(duì)象時(shí)，一般要同時(shí)修改 constructor 屬性

7. constructor.name構(gòu)造函數(shù)的名稱

function Foo() {}
var f = new Foo();
f.constructor.name // "Foo"

8. instanceof 運(yùn)算符

instanceof 返回一個(gè)boolean布爾值汗贫，表示對(duì)象是否是構(gòu)造函數(shù)的實(shí)例

var v = new Vehicle();

v instanceof Vehicle // true

// instanceof是 實(shí)例的意思

instanceof運(yùn)算符的左邊是實(shí)例對(duì)象身坐，右邊是構(gòu)造函數(shù)。

1. instanceof會(huì)檢查右邊構(gòu)建函數(shù)的原型對(duì)象（prototype）芳绩，是否在左邊對(duì)象的原型鏈上掀亥。
   因此，下面兩種寫(xiě)法是等價(jià)的妥色。

var v = new Vehicle();

v instanceof Vehicle
// 等同于
Vehicle.prototype.isPrototypeOf(v)

特例：

instanceof的原理是檢查右邊構(gòu)造函數(shù)的prototype屬性搪花，是否在左邊對(duì)象的原型鏈上。
有一種特殊情況，就是左邊對(duì)象的原型鏈上撮竿，只有null對(duì)象吮便。這時(shí)，instanceof判斷會(huì)失真幢踏。

instanceof的用處：

instanceof運(yùn)算符的一個(gè)用處髓需，是判斷值的類型。

• 注意房蝉，instanceof運(yùn)算符只能用于對(duì)象僚匆，不適用原始類型的值。

var x = [1, 2, 3];
var y = {};
x instanceof Array // true
y instanceof Object // true

console.log(typeof x)   // object  ---- 注意：數(shù)組的typeof是object



-----------------------------------------------
注意： instanceof只能用于對(duì)象搭幻，不能用于原始類型的值
var s = 'hello';
s instanceof String // false

object對(duì)象的相關(guān)方法

Object.getPrototypeOf()

Object.getPrototypeOf方法返回參數(shù)對(duì)象的原型咧擂。這是獲取原型對(duì)象的標(biāo)準(zhǔn)方法。

• Object.getPrototypeOf() 返回參數(shù)對(duì)象的原型對(duì)象

var F = function () {};
var f = new F();
Object.getPrototypeOf(f) === F.prototype // true


-----------------------------------------------------------------

    const a = {};
    const b = {name: 'wang'};
    a.__proto__ = b;
    console.log(a.name)   // wang

    // a.__proto__ = b  等價(jià)于  Object.setPrototypeOf(a,b);     !!!!!!!!!

• 注意：
  根據(jù)語(yǔ)言標(biāo)準(zhǔn)檀蹋，proto屬性只有瀏覽器才需要部署松申，其他環(huán)境可以沒(méi)有這個(gè)屬性。它前后的兩根下劃線俯逾，表明它本質(zhì)是一個(gè)內(nèi)部屬性贸桶，不應(yīng)該對(duì)使用者暴露。因此桌肴，應(yīng)該盡量少用這個(gè)屬性皇筛，而是用Object.getPrototypeof()和Object.setPrototypeOf()，進(jìn)行原型對(duì)象的讀寫(xiě)操作识脆。

獲取實(shí)例對(duì)象的原型對(duì)象有三種方法

1. obj.__proto__
2. obj.constructor.prototype
3. Object.getPrototypeOf(obj)



上面三種方法之中设联，前兩種都不是很可靠。

__proto__屬性只有瀏覽器才需要部署灼捂，其他環(huán)境可以不部署离例。

而obj.constructor.prototype在手動(dòng)改變?cè)蛯?duì)象時(shí)，可能會(huì)失效悉稠。

Object.getOwnPropertyNames()

Object.getOwnPropertyNames方法返回一個(gè)數(shù)組宫蛆，成員是參數(shù)對(duì)象本身的所有屬性的鍵名，不包含繼承的屬性鍵名的猛。

Object.prototype.hasOwnProperty()

hasOwnProperty ------------- 自身屬性

對(duì)象實(shí)例的hasOwnProperty方法返回一個(gè)布爾值耀盗，用于判斷某個(gè)屬性定義在對(duì)象自身，還是定義在原型鏈上卦尊。

hasOwnProperty方法是 JavaScript 之中唯一一個(gè)處理對(duì)象屬性時(shí)叛拷，不會(huì)遍歷原型鏈的方法。Ｆ袢础７揶薄Ｈ雇帧！Ｊ鸷啤Ｈ嗳肌！＝疃啊４短馈！

• hasOwnProterty是唯一一個(gè)處理對(duì)象屬性時(shí)弊攘，不會(huì)遍歷原型鏈的方法 Ｇ栏！襟交！

in 運(yùn)算符 ------------------- 不區(qū)分自身屬性和繼承屬性

in運(yùn)算符返回一個(gè)布爾值氓栈，表示一個(gè)對(duì)象是否具有某個(gè)屬性。它不區(qū)分該屬性是對(duì)象自身的屬性婿着，還是繼承的屬性。

對(duì)象的拷貝

如果要拷貝一個(gè)對(duì)象醋界，需要做到下面兩件事情竟宋。

1. 確保拷貝后的對(duì)象形纺，與原對(duì)象具有同樣的原型丘侠。
2. 確保拷貝后的對(duì)象逐样，與原對(duì)象具有同樣的實(shí)例屬性蜗字。

• 拷貝對(duì)象需要做到兩點(diǎn)，與元對(duì)象具有相同的原型和相同的實(shí)例屬性