JS面向对象之this

JavaScript

程序设计方法

1、面向过程编程
基本思想：以过程为重心，自顶向下逐步细化
程序—— 一系列函数调用的集合
语言：C、Fortran、Pascal……
2、面向对象编程
基本思想：对象作为程序的基本单元；程序分解为数据和相关操作
语言：smalltalk、JavaScript、C++……

基本概念：
- 类、对象
- 属性、方法
基本特征：
- 继承：父类与子类
- 封装：将用户可见与不可见的部分良好分开
- 多态：接口的不同实现方式，比如子类继承父类，就可以重写父类的方法，来实现不同的方法。

3、JS面向对象
constructor 构造器（构造类型）
① 对象创建过程：

var o = new Object();   //new后面的为constructor
var o = {x:1}
//创建自定义构造器
function Employee(name, company,salary){
    this.name = name;  //this创建对象的属性
    this.company = company;
    this.salary = salary;
    this.changeSalary = funtion(salary){
        this.salary = salary;
    }
}
//创建对象
var jim = new Employee('jim Green', 'NetEase',3000);
//调用属性和方法
jim.chagneSalary(4000);

② 三种常见构造器创建方式

function Employee() {}  //函数的定义
var Employee = function() {}   //函数表达式 
var Employee = new Function();  //s使用new 

所有函数都能被当成构造器？ $\color{red}{(×)}$

var o = new Math.min(); //错
//并不是所有JS中的函数都能当做构造器来使用，一般来数，用户自定义的，以及JS中内置的构造器都可以当成constructor

$\color{red}{注意：}$

function Employee(name, company,salary){
    this.name = name;  
    this.company = company;
    this.salary = salary;
    this.changeSalary = funtion(salary){
        this.salary = salary;
    }
    return {};  //constructor也是一个函数，可以有返回值
}
var jim = new Employee('jim Green', 'NetEase',3000);      
//当使用new构创建构造器时，如果构造器的返回值是一个对象类型的话，则直接将这个对象作为新创建的对象，其他的则为创建一个新对象。
alert（jim.name）;  //undefined;因为在返回的空对象中没有name属性

③ this
1）全局环境中的this指向全局对象（window对象），这只是在浏览器环境中的，如果在Node.js中则不是window。

var a = 10;
alert(this.a);  //指向window
this.b = 20;
alert(b);   //指向window
c=30;
alert(this.c);  //指向window

2）构造器中的this：指向将要创建出的新对象

function Person(name,age){
    this.name = name;   //this指向将要创建出的新对象，因为使用构造器创建对象时会执行构造函数，而构造函数中的this指向要创建出来的对象
    this.age = age;
    this.sayHello = function(){
        alert('Hello,'+this.name);
    }
}
var p1 = new Person('lily','20');

3）函数中的this：指向函数的调用者

function Person(name,age){
    this.name = name;  
    this.age = age;
    this.sayHello = function(){
        alert('Hello,'+this.name);  //this指向p1
    }
}
var p1 = new Person('lily','20');
p1.sayHello();

4）new function 中的this：全局对象（window）

(function(){
    var f = new Function('alert(this)');    //不管出现在哪里，使用new都指向全局对象window 
    f();
})();
function Foo(){
    this.bar = function(){
        var f = new Function('alert(this)');    //this指向全局对象window
        f();
    }
}
var foo = new Foo();
foo.bar();

5）eval中的this：调用上下文中的this

(function(){
    eval('alert(this)');    //在闭包中执行，上下文是global，this指代window对象
})();
function Foo(){
    this.bar = function(){
        eval('alert(this)');    //上下文是调用者，eval中的this为bar函数的调用者，即为Foo对象
    }
}
var foo = new Foo();
foo.bar();

eval() 【evaluation：赋值】函数可计算某个字符串，并执行其中的的 JavaScript 代码。

this总结

6）apply与call

function Point(x,y){
    this.x = x;
    this.y = y';
    this.move = function(x,y){
    this.x += x;    //this指向由point
    this.y += y;    //this指向由point
    }
}
var point = new Point(0,0); //创建（0,0）点
point.move(1,1);    //将点移动到（1,1）
var circle = {x:0,y:1.r:1}; //使用对象直接量，以（0,1）为原点换一个半径为1的圆
point.move.apply(circle,[1,1]); //圆心移到（1,2）；改变调用函数里的对象。改变函数中的this，this指向由point改为circle
point.move.call(circle,1,1);    //与apply类似，但是第二个参数有所不同。apply为一个数组[1,1],表示一起传入，而call为依次传入