风止于秋水,心止于你


  • 首页

  • 分类

  • 归档

  • 标签

  • 关于

深入浅出javascript对象原型

发表于 2017-10-22 | 分类于 javascript 基础

1原型继承vs类继承

(1)类继承

java 中:指在已有的一个类基础上创建新类的过程。–复制行为

(2)原型继承

指在一个对象的基础上创建新对象的过程。原型指在这过程中作为基础的对象。
–委托行为,关联行为。并不是把基础对象的属性copy 到自身

2 prototype

对象(函数)的内置属性,也有少数值为空,指向另外一个对象,即是另外对象的引用

3 (重点)prototype 和 proto 的区别

这个话题首先要先搞清楚 对象 和 函数 ,2个在这方面的表现是不一样的。

函数就是对象的一个子类型(从技术角度来说就是“可调用的对象”)。有时我们说对象是包含函数,但是有时是不包含的,这点要注意。

(1)任何对象都拥有 proto(隐式原型) 属性, 一般指向他们的构造函数的原型 (prototype) ,对象的prototype 是内置的,不可直接访问 ,a.prototype 是undefined

__proto__ 绝大多数(不是所有!)浏览器也支持一种非标准的方法来访问内部[[Prototype]]属性:
function foo(){

}
console.log(Object.getPrototypeOf( a )===foo.prototype);
console.log(a.__proto__==foo.prototype);

(2)所有函数都拥有prototype (显式原型)属性,函数是可以直接访问的

foo.prototype 。当然 foo.__proto__ 也是ok 的。

(5)

3 原型领域的一些重要姿势

(1)所有函数都是Function 的 实例,Function 本身也是函数,函数和对象有时是可以一起说成对象的,例如都可以从函数创建而来的。

(2)Function,Object,Array 这些引用是函数来的。有时我们也会成为对象。

(3)原型链的顶端是Object.prototype,其 proto为 null

(4)constructor

定义一个函数时 会让他的原型指向函数本身

console.log( Function.prototype.constructor === Function); // true
console.log(Object.prototype.constructor === Object);     // true
var a=new Object();
console.log(a.constructor === Object);     // true    表面有点向java 一样 从Object 创建而来,其实是根据原型链找到的
console.log(Array.prototype.constructor === Array);       // true

(5)原型继承常规机制

![image](https://github.com/5201314999/5201314999.github.io/tree/master/uploads/jizhi.png)  

(6)es5,es6 设置函数关联

1
2
3
4
5
6
7
8
9
10
11
// ES6之前需要抛弃默认的Bar.prototype
Bar.ptototype = Object.create( Foo.prototype );
// ES6开始可以直接修改现有的Bar.prototype
Object.setPrototypeOf( Bar.prototype, Foo.prototype);
// 摒弃的2种
bar.prototype = foo.prototype 这种关联会改变foo.prototype ,直接引用
bar.prototype = new foo();
这样的确会创建一个关联到 foo.prototype 的新对象。 但是它同时 也执行了对 foo 函数的调用,如果 foo 函数中有给this添加属性、修改状态、写日志等,就会影响到 bar() 的 “后代” 。

4 原型链的概念

如果想要找到一个对象的属性,首先会先在自身查找,如果没有,就会通过proto属性一层层的向上查找,直到原型链的顶端 Object.prototype(proto: null)
这种通过某种纽带(proto)将对象之间形成一种继承关系 这种关系呈现出一种链条的形状 将这种链条称之为原型链

5创建对象的方法

(1)字面量

var a={
    name:1
};

(2)构造函数

function Person(){
    this.a=1;   
}
var a=new Person(b);

(3)Object.create 函数

var b={
    name:1
};
var a=Object.create(b);

6 几种原型图,都是建立在prototype 和 proto 的基础上的。

(1)字面量对象
    ![image](https://github.com/5201314999/5201314999.github.io/tree/master/uploads/const.png)
(2)函数
    ![image](https://github.com/5201314999/5201314999.github.io/tree/master/uploads/function.png)
(3)数组
     ![image](https://github.com/5201314999/5201314999.github.io/tree/master/uploads/array.png)
(4)对象
    ![image](https://github.com/5201314999/5201314999.github.io/tree/master/uploads/obj.png)

7 arr.push() 是怎么来的 ,其实是在 Array.protyotype.push 这样来的。

8 检测关联

(1)a instanceof Foo; // true 左侧是对象,右侧是函数


(2)b.isPrototypeOf(a) //检测2 个对象的 


(3)Object.getPrototypeOf( a )  利用函数和对象2种情况各自的原型特点去判断是否有关联

9 原型有时会屏蔽设置值的。用得不多要用的话再查询 书籍,脑力有限,挑重点的即可。

备注:本篇文章参考了《你不知道的javascript 上》 ,李佳怡的知乎,简书上的文章。

javascript 之 this

发表于 2017-10-09 | 分类于 javascript 基础

1 this 可以绑定一个对象

2 为什么使用this

这段代码可以在不同的上下文对象( me 和 you )

3 this 在es5 中是上下文调用该函数的对象。箭头函数的话是看当前的词法作用域。

4 this 的四种绑定原则

(1)默认绑定

非严格模式指向全局作用域window ,严格模式指向undefined

1
2
3
4
5
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2

(2)隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象,

1)对象里的函数并不代表对象拥有该函数,其实只是跟函数做了个关联,函数还是单独存在的。

2)dom 事件中this 是绑定当前dom 。

3)setTimeout() 中指向window

1
2
3
4
5
6
7
8
9
10
11
12
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42

(3)显式绑定

函数用 call、apply或者 bind 调用。

1
2
3
4
5
6
7
8
9
10
var obj = {
x: 10
}
function foo(){
console.log(this); //{x: 10}
console.log(this.x); //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

(4)构造函数

构造函数其实是在调用普通函数的基础上做了一些而外的4步操作

  1. 创建(或者说构造)一个全新的对象。
  2. 这个新对象会被执行[[原型]]连接。
  3. 这个新对象会绑定到函数调用的 this 。
  4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。
1
2
3
4
5
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

5 箭头函数中的this 是当前词法作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); //Object {x: 10}
console.log(this.x); //10
}
}
}
fn()()();
}
}
obj.foo();

arcgis for flex 交接

发表于 2017-09-25 | 分类于 arcgis for flex

1.项目代码

  • FlexMap3.0(视频监控3.0)

    http://172.17.0.2/svn/c3m-video/C3MVideo/branches/C3M-Video_V3.0.1/C3MVideo/SMP/websever/GIS

  • FlexMap4.0(视频监控4.0)

    http://172.17.0.2/svn/c3m-video/C3MVideo/branches/C3M-Video_V4.1/C3MVideo/SMP/websever/GIS/FlexMapV4.0

  • PoliceCombat(图侦实战)

    http://172.17.0.2/svn/c3m-video/PSCP/trunk/source/code/PoliceCombat
  • GosunMap(指挥调度)

    http://172.17.0.2/svn/c3m-video/MDCP/trunk/source/GosunMap

  • AlivePDF.swc (flex 项目里封装的一个库,类似Java项目里core-1.0 包)

    这个有时是为了看看里面的源码

2.开发工具

  • FlashBuilder_4_6_LS10.exe

    ide ,基于eclipse 系列
    
  • flashplayer_22_ax_debug.exe

    flash 运行需要的调试插件,运行只需安装flash player
    

备注:ide 自身不携带svn 插件

3.flex语言开发中涉及的文件类型

  • .as 文件(相当于js)

    语法上风格,在java基础上融入了js 。
  • .mxml 文件 (相当于html)

  • .xml 文件 (参数配置文件)

  • .swf .swz 文件

    .mxml 编译后的文件,可以理解为 java .class 文件

4 flex 项目目录

image

5 flex地图开发框架的介绍

  • ArcGIS API for Flex(ArcGIS API for JS 的flex 版库,地图api)

  • ArcGIS Viewer for Flex(基于地图api 封装的一个开源框架)

1.FlexMap viewr 目录

image

2. index.mxml 代码的入口

3. config.xml 地图的配置文件。中心点,图层以及一些widgets 的加载配置

维护flex 过程中写as 文件比较多。基本不需要用到flex 皮肤的知识。

6 重要代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?xml version="1.0" ?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Read more about ArcGIS Viewer for Flex - http://links.esri.com/flexviewer
//
////////////////////////////////////////////////////////////////////////////////
-->
<configuration>
<title>ArcGIS Viewer for Flex</title>
<subtitle>a configurable web mapping application</subtitle>
<logo>assets/images/logo.png</logo>
<!-- <clientUrl>plugin/gis/</clientUrl> -->
<style>
<colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>
<alpha>0.8</alpha>
<font name="Microsoft YaHei"></font>
<titleFont name="Microsoft YaHei"></titleFont>
<subTitleFont name="Microsoft YaHei"></subTitleFont>
</style>
<!-- replace the following url with your own geometryservice -->
<geometryservice url="http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer" />
<!-- UI elements -->
<widget left="10" top="10" config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationSimpleWidget.swf"/>
<widget right="10" top="10" config="widgets/MapSwitcher/MapSwitcherWidget.xml" url="widgets/MapSwitcher/SimpleMapSwitcherWidget.swf"/>
<widget right="0" bottom="0" config="widgets/OverviewMap/OverviewMapWidget.xml" url="widgets/OverviewMap/OverviewMapWidget.swf"/>
<widget left="6" bottom="0" config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/MapMouseWidget.swf"/>
<!-- <widget left="0" top="0" config="widgets/HeaderController/HeaderControllerWidget.xml" url="widgets/HeaderController/HeaderControllerWidget.swf"> -->
<map wraparound180="false" regionChange="true" initialextent="110.16801,22.2574,116.9246,25.2187">
<basemaps>
<layer label="电子地图" type="roadmap_cache" visible="true"
url="http://192.168.16.61:8088" icon="assets/images/basemap_streets.jpg"/>
<layer label="影像图" type="satellite_cache" visible="false"
url="http://192.168.16.61:8088" icon="assets/images/basemap_imagery.jpg"/>
<layer label="影像图" type="overlay_cache" visible="false"
url="http://192.168.16.61:8088" icon="assets/images/basemap_imagery_with_labels.png"/>
</basemaps>
<operationallayers>
<layer label="device_layer" type="graphic" visible="true"></layer>
<layer label="hotspot_layer" type="graphic" visible="true"></layer>
<layer label="policefence_layer" type="graphic" visible="true"></layer>
<layer label="policemobile_layer" type="graphic" visible="true"></layer>
<layer label="myplace_layer" type="graphic" visible="true"></layer>
<layer label="measure_layer" type="graphic" visible="true"></layer>
<layer label="measureGraphic_layer" type="graphic" visible="true"></layer>
<layer label="gxx_track_graphiclayer" type="graphic" visible="true"></layer>
<layer label="gxx_track_mark_graphiclayer" type="graphic" visible="true"></layer>
<layer label="gxx_realtime_graphiclayer" type="graphic" visible="true"></layer>
<layer label="gxx_realtime_mark_graphiclayer" type="graphic" visible="true"></layer>
</operationallayers>
</map>
<!-- widgets organized into widget containers that manage close/open etc -->
<!-- supported layout property options: horizontal(default)|float|vertical|fix-->
<widgetcontainer layout="float">
<widget label="书签" left="430" top="90"
icon="assets/images/i_bookmark.png"
config="widgets/Bookmark/BookmarkWidget.xml"
url="widgets/Bookmark/BookmarkWidget.swf"/>
<!-- <widget label="Draw" left="60" top="400" -->
<!-- icon="assets/images/i_draw2.png" -->
<!-- config="widgets/Draw/DrawWidget.xml" -->
<!-- url="widgets/Draw/DrawWidget.swf"/> -->
<!-- <widget label="Measure" left="60" top="400" -->
<!-- icon="assets/images/i_measure2.png" -->
<!-- config="widgets/Measure/MeasureWidget.xml" -->
<!-- url="widgets/Measure/MeasureWidget.swf"/> -->
<widget label="打印" left="400" top="100"
icon="assets/images/i_print.png"
config="widgets/Print/PrintWidget.xml"
url="widgets/Print/PrintWidget.swf"/>
<widget label="我的位置" left="480" top="220"
icon="assets/images/i_pin.png"
config="widgets/MyPlace/MyPlaceWidget.xml"
url="widgets/MyPlace/MyPlaceWidget.swf"/>
<widget label="轨迹回放" left="120" top="124"
icon="assets/images/i_track.png"
config="widgets/Track/HistoryTrackWidget.xml"
url="widgets/Track/HistoryTrackWidget.swf"/>
<widget label="实时轨迹" left="120" top="200"
preload="open"
icon="assets/images/i_measure2.png"
config="widgets/Track/RealTimeTrackWidget.xml"
url="widgets/Track/RealTimeTrackWidget.swf"/>
<widget label="设备编辑"
icon="assets/images/i_measure2.png"
config="widgets/DeviceEdit/DeviceEditWidget.xml"
url="widgets/DeviceEdit/DeviceEditWidget.swf"/>
</widgetcontainer>
</configuration>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
1 document.getElementById("${application}") //js 获取flex 对象
2 事件的发布与订阅
AppEvent.publish(AppEvent.WIDGET_CHANGE_STATE, data); //发布
AppEvent.addListener(AppEvent.DATA_PUBLISH, addData); //订阅
3 js 与 flex 间的相互调用
ExternalInterface.addCallback("drawPoliceCombatTrackOnMap",this.drawPoliceCombatTrackOnMapHandler); // 给js 提供的接口
document.getElementById("${application}").updateChnGPS(data); //调用其暴露出的接口
ExternalInterface.call(js_callback,data); //调用js 的函数
4 初始化一个业务组件
(1)js 初始化
配置文件配置widget,不直接初始化,由js 控制
var params = {
label:'我的位置'
};
flexObj.openWidget(params);
关闭
flexObj.closeWidget( {
label:"设备编辑"
});
(2)配置文件直接初始化
<widget label="实时轨迹" left="120" top="200"
preload="open"
icon="assets/images/i_measure2.png"
config="widgets/Track/RealTimeTrackWidget.xml"
url="widgets/Track/RealTimeTrackWidget.swf"/>
5 地图参数配置方法
(1) 直接配置config.xml
(2)从外部js 读取,外部js 从application.properties 获取。
function getInitMapParam(){
return {
gisServerInfo:{
username:"XXXX",
password:"xxxxx",
url:"http://172.16.16.107:8080/ningxiang",
tileType:"google"
}
6 as 文件使用
使用import 导入 ,类似java 初始化一个对象一样
7 mxml 文件的使用
(1)编译时添加为模块编译,使用openWidget 这种方法初始化
(2)在另外一个mxml 文件中作为标签使用
s:Group styleName="canvans" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
xmlns:mx="library://ns.adobe.com/flex/mx" width="340" height="230"
xmlns:control = "com.gosun.gis.frame.core.control.*"
implements="widgets.MyPlace.IMyPlaceContent">
<control:InfoWindowTemplete> 初始化InfoWindowTemplete.mxml
(3) var bayonetInfoContent:BayonetSpatialQueryContent = new BayonetSpatialQueryContent();
8 flex 提示框
Alert.show(info.toString(), wTemplate.widgetTitle);

7 107机器,109机器说明

172.16.16.107 账号 administrator 密码 123@456

用于下载地图底图,2种, 街道图 roadmap 和 卫星图 satellite
全能下载器,上面也有tomcat 可以用来部署测试地图底图

172.16.16.109 账号 administrator 密码 A123@456

跑着apache ,目前部门里的系统地图瓦片都是放在apache 里。E:map ,可以通过apche服务找到apche 目录里的httpd.conf 来确定appache 的文档更目录。

资源地址:AlivePDF和IDE 安装包可以上172.16.16.107 D:\交接 拷贝。

js 深浅拷贝

发表于 2017-09-17 | 分类于 javascript 基础

一 了解深浅拷贝前提

1.es5 数据类型分为2种

1) 基本类型

Number,String,null,undefined,Boolean

2) 引用类型

Object

2堆栈保存

1)基本类型以键值对的形式是保存在栈中,键是变量标识符,值是变量值

栈内存 header 2
标识符 变量值
标识符 变量值

2)引用类型数据,对象实际内容是保存在堆中,栈内存中只保存变量标识符,值是引用地址(实际内容在堆中的位置)

二 深浅拷贝

1.var b= a ,实际上是复制了一份a 的栈内存

当a 是基础类型变量时, 这样是深拷贝。两者不会互相影响。

栈内存 header 2
a 5
b 5

而当a 是引用类型时,实际上只复制了对象a的引用地址,当a 改变时,b 也会受到影响。2个指向同份堆内存,互相影响。

1
2
3
4
var a={name:'a',age:20};
var b=a;
b.name='b';
console.log(a.name=='b'); //true
栈内存 header 2
a a 在堆中的位置
b a 在堆中的位置

2.深浅拷贝的基础实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/对所有属性进行遍历,如果是基本类型,直接copy .否则递归遍历属性的子属性知道基本类型。
function deepClone(obj){
var deepObj;
if(!obj||typeof obj!=='object'){
throw new Error('arguments error','error');
}
Array.isArray(obj)?deepObj=[]:deepObj={};
//obj.constructor==Array?deepObj=[]:deepObj={};
for(key in obj){
debugger;
if(obj.hasOwnProperty(key)){
if(obj[key]&&typeof obj[key]==='object'){
deepObj[key]=deepClone(obj[key]);
}
else{
deepObj[key]=obj[key];
}
}
}
return deepObj;
}

//测试
function test(){
var a=[1,2,{‘name’:’jiongrong’,age:20}];
var b=deepClone(a);
b[2].name=’jiongrong1’;
var c=[1,2,{people:{name:’yingfei’},age:20}];
var d=deepClone(c);
d[2].people.name=’yingfei1’;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}

1
2
### 3.快速深拷贝的现成方法
1)常用 JSON.parse() .JSON.stringify()
var d=JSON.parse(JSON.stringify(c));
1
2
2) jquery 提供了extend 方法
function run3(){
  var a=[1,2,{'name':'jiongrong',age:20}];
  var b=$.extend(true,{},a);  //true 是深拷贝  false 浅拷贝 数组拷贝完类型会不一样
  b[2].name='jiongrong1';
  console.log(a);
  console.log(b);
  var c=[1,2,{'name':'jiongrong',age:20}];
  var d=$.extend(false,{},c);
  d[2].name='jiongrong1';
  console.log(c);
console.log(d);

}
```
image

写完,花时2个半小时 2017年9月12日

Hello World

发表于 2017-09-13

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

范炯荣

范炯荣

5 日志
2 分类
2 标签
© 2017 范炯荣
由 Hexo 强力驱动
主题 - NexT.Mist