JS面向对象及组件开发学习笔记(1)

发表于 | 分类于 ， ， | 阅读次数:

面向对象

this

  • js中,所有的函数都是通过一个对象进行调用的,是谁调用this就指向谁
    例如定时器，打印里面的this会指向window - 定时器是window下面的方法
    window object是所有浏览器都支持的，代表当前窗口。全局变量是window对象的属性，全局函数是window的方法。所以你不写window，也会默认对象是window，此种情况window对象可以省略.
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
<script>
  var obj = new Object();  //创建了一个空的对象
  obj.name = '小明';  //属性
  obj.showName = function(){  //方法
    alert(this); //打印出来的this是obj
  };
  obj.showName();
</script>
<script>
    var obj = new Object();  //创建了一个空的对象
    obj.name = '小明';  //属性
    obj.showName = function(){  //方法
        alert(this);  //打印出来的this是document
    };
    document.onclick = obj.showName;
 </script>
 <script type="text/javascript">
    var obj = {
      showName() {
        console.dir(this);
      }
    }
    var f = obj.showName;
    obj.showName(); //obj对象
    f();  //window
</script>

工厂方式与构造函数

工厂方式：
面向对象中的封装函数
改成与系统对象类似写法
-首字母大写
-New关键字提取
-This指向为新创建的对象
构造函数
-用来创建对象的函数，叫做构造函数
存在的问题
-对象的引用
-浪费内存

当new去调用一个函数：这个时候函数中的this就是创建出来的对象，而且函数的返回值就是this(隐式返回)
new 后面调用的函数叫做构造函数

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
function createPerson(name){
  // 1.原料
  var obj = new Object();
  // 2.加工
  obj.name = name;
  obj.showName = function(){
    alert(this.name);
  }
  // 3.出厂
  return obj;
}
var p1 = createPerson('xiaoming');
p1.showName();
var p2 = createPerson('xiaoqiang');
p2.showName();

var arr = new Array();
var date = new Date();

=>

function CreatePerson(name){
  this.name = name;
  this.showName = function(){
    alert(this.name);
  }
}

var p1 = new CreatePerson('xiaoming');
p1.showName();
var p2 = new CreatePerson('xiaoqiang');
p2.showName();

alert(p1.showName == p2.showName);  //false 引用地址不同

对象引用

基本类型：赋值的时候只是值的复制
对象类型：赋值不只是值的复制，而且也是引用的传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var a = 5;
var b = a;
b += 3;
alert(b); //8
alert(a); //5

var a = [1,2,3];
var b = a;
b.push(4);
alert(b); //[1,2,3,4]
alert(a); //[1,2,3,4]

var a = [1,2,3];
var b = a;
var b = [1,2,3,4];
alert(b); //[1,2,3,4]
alert(a); //[1,2,3]

基本类型：==运算的时候值相同就是true
对象类型：==运算的时候值和引用都相同时才为true

原型：去改写对象下面公用的方法或者属性，让公用的方法或者属性在内存中存在一份(提高性能)

面向对象的写法和使用

1
2
3
4
5
6
7
function 构造函数(){
  this.属性
}
构造函数.原型.方法 = function(){};

var 对象1 = new 构造函数();
对象1.方法();

面向对象的选项卡

原则
-先写出普通的写法，然后改成面向对象写法
普通方法变型
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中
改成面向对象
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题：事件或者定时器中容易出问题，尽量让面向对象中的this指向对象

示例：点击查看

面向对象的拖拽

注意
-Event对象

示例：点击查看