[关闭]
@guoxs 2015-07-07T15:28:15.000000Z 字数 2711 阅读 1153

JS面向对象之this

JavaScript


程序设计方法

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

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

3、JS面向对象
constructor 构造器(构造类型)
① 对象创建过程

  1. var o = new Object(); //new后面的为constructor
  2. var o = {x:1}
  3. //创建自定义构造器
  4. function Employee(name, company,salary){
  5. this.name = name; //this创建对象的属性
  6. this.company = company;
  7. this.salary = salary;
  8. this.changeSalary = funtion(salary){
  9. this.salary = salary;
  10. }
  11. }
  12. //创建对象
  13. var jim = new Employee('jim Green', 'NetEase',3000);
  14. //调用属性和方法
  15. jim.chagneSalary(4000);

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

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

所有函数都能被当成构造器? (×)

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

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

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

  1. var a = 10;
  2. alert(this.a); //指向window
  3. this.b = 20;
  4. alert(b); //指向window
  5. c=30;
  6. alert(this.c); //指向window

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

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

3)函数中的this:指向函数的调用者

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. this.sayHello = function(){
  5. alert('Hello,'+this.name); //this指向p1
  6. }
  7. }
  8. var p1 = new Person('lily','20');
  9. p1.sayHello();

4)new function 中的this:全局对象(window)

  1. (function(){
  2. var f = new Function('alert(this)'); //不管出现在哪里,使用new都指向全局对象window
  3. f();
  4. })();
  5. function Foo(){
  6. this.bar = function(){
  7. var f = new Function('alert(this)'); //this指向全局对象window
  8. f();
  9. }
  10. }
  11. var foo = new Foo();
  12. foo.bar();

5)eval中的this:调用上下文中的this

  1. (function(){
  2. eval('alert(this)'); //在闭包中执行,上下文是global,this指代window对象
  3. })();
  4. function Foo(){
  5. this.bar = function(){
  6. eval('alert(this)'); //上下文是调用者,eval中的this为bar函数的调用者,即为Foo对象
  7. }
  8. }
  9. var foo = new Foo();
  10. foo.bar();

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

this总结

场景
全局对象 全局对象(window)
constructor 新创建出的对象
函数调用 函数调用者
new Function 全局对象(window)
eval 调用上下文中的this

6)apply与call

  1. function Point(x,y){
  2. this.x = x;
  3. this.y = y';
  4. this.move = function(x,y){
  5. this.x += x; //this指向由point
  6. this.y += y; //this指向由point
  7. }
  8. }
  9. var point = new Point(0,0); //创建(0,0)点
  10. point.move(1,1); //将点移动到(1,1)
  11. var circle = {x:0,y:1.r:1}; //使用对象直接量,以(0,1)为原点换一个半径为1的圆
  12. point.move.apply(circle,[1,1]); //圆心移到(1,2);改变调用函数里的对象。改变函数中的this,this指向由point改为circle
  13. point.move.call(circle,1,1); //与apply类似,但是第二个参数有所不同。apply为一个数组[1,1],表示一起传入,而call为依次传入
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注