__x__(78)1016第十五天__ JavaScript 面向对象

面向对象编程（Object Oriented Programming，缩写为 OOP）

是目前主流的编程范式。

是单个实物的抽象，

是一个容器，封装了属性（property）和方法（method），属性是对象的状态，方法是对象的行为（完成某种任务）。

将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。

对象可以复用，通过继承机制还可以定制。

具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。

  • 构造函数

“类” 就是对象的模板，对象就是 “类” 的实例。

JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

  • 使用构造函数（constructor）作为对象的模板，描述实例对象的基本结构。。
  • 所谓 ”构造函数”，就是专门用来生成实例对象的函数。
  • 一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。
  • 为了与普通函数区别，构造函数名字的第一个字母通常大写。
  • 特点：
    • 函数体内部使用了 this 关键字，代表所要生成的实例
    • 生成对象的时候，必须使用 new 命令
  • new 命令
    • 通过new命令，让构造函数生成一个实例对象
    • new命令执行时，构造函数内部的this，就代表了新生成的实例对象
    • 使用new命令时，根据需要，构造函数也可以接受参数 
      • var Vehicle = function (p) {
    this.price = p;
};

var v = new Vehicle(500);

        new命令本身就可以执行构造函数，所以后面的构造函数可以带括号，也可以不带括号。但是为了表示是函数调用，推荐使用括号

      • var Vehicle = function (){
    this.price = 1000;
};

var v = Vehicle();    // 将构造函数当成普通函数调用，不抱错
v    // undefined    // 但是变量v变成了undefined
price    // 1000    // price属性变成了全局变量

// 一个解决办法是:
// 构造函数内部使用严格模式，即第一行加上use strict。
// 这样的话，一旦忘了使用new命令，直接调用构造函数就会报错。
        function Fubar(foo, bar){
  ‘use strict‘;
  this._foo = foo;    // 由于 严格模式中，函数内部的 this 不能指向全局对象，默认等于undefined
  this._bar = bar;
}

Fubar();    // TypeError: Cannot set property ‘_foo‘ of undefined

// 另一个解决办法：// 造函数内部判断是否使用new命令，如果发现没有使用，则直接返回一个实例对象。
        function Fubar(foo, bar) {
    if (!(this instanceof Fubar)) {
        return new Fubar(foo, bar);
    }

    this._foo = foo;
    this._bar = bar;
}
// 此时不管加不加new命令，都会得到同样的结果
Fubar(1, 2)._foo    // 1
(new Fubar(1, 2))._foo    // 1
  • new 命令的原理

使用new命令时，它后面的函数依次执行下面的步骤

1. 创建一个空对象，作为将要返回的对象实例

2. 将这个空对象的隐式原型对象 __proto__，指向构造函数的 prototype 属性

3. 将这个空对象赋值给函数内部的 this 关键字

4. 开始执行构造函数内部的代码

    • 如果构造函数内部有 return 语句，而且 return 后面跟着一个对象，new 命令会返回 return 语句指定的对象；否则，就会不管 return 语句，返回 this 对象

      • 如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象
      • 因为new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象

        function getMessage() {
    return ‘this is a message‘;
}

var msg = new getMessage();

msg    // {}
typeof msg    // "object"
    • new 命令简化的内部流程，可以用下面的代码表示 
      • function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
    // 将 arguments 对象转为数组
    var args = [].slice.call(arguments);

    // 取出构造函数
    var constructor = args.shift();

    // 创建一个空对象，继承构造函数的 prototype 属性
    var context = Object.create(constructor.prototype);

    // 执行构造函数
    var result = constructor.apply(context, args);

    // 如果返回结果是对象，就直接返回，否则返回 context 对象
    return (typeof result === ‘object‘ && result != null) ? result : context;
}

// 实例
var actor = _new(Person, ‘张三‘, 28);
  • 函数内部可以使用 new.target 属性
    • 如果当前函数是 new 命令调用，new.target 指向当前函数，否则为 undefined

      • function f() {
    console.log(new.target === f);
}

f();    // false    // new.target 指向 undefined
new f();    // true    // new.target 指向 当前函数
    • 使用这个属性，可以判断函数调用的时候，是否使用new命令 
      • function f() {
    if (!new.target) {
        throw new Error(‘请使用 new 命令调用！‘);
    }
    // ...
}

f();     // Uncaught Error: 请使用 new 命令调用！
  • Object.create() 创建实例对象
    • 有时拿不到构造函数，只能拿到一个现有的对象
    • 可以使用 Object.create() 方法，生成新的实例对象 
      • var Person= {
    name: ‘张三‘,
    age: 38,
    greeting: function() {
        console.log(‘Hi! I\‘m ‘ + this.name + ‘.‘);
    }
};

var person2 = Object.create(Person);

person2.name;    // 张三
person2.greeting();    // Hi! I‘m 张三.
  • this 关键字

this除了可以在构造函数中表示实例对象，还可以用在其他场合

但是不管什么场合，this 总是返回一个对象

  • this 的指向是可变的

    • 只要函数被赋给另一个变量，this 的指向就会变

      • var A = {
    name: ‘张三‘,
    describe: function () {
        return ‘姓名：‘+ this.name;
    }
};

var name = ‘李四‘;    // window.name
var f = A.describe;    // window.f
f();    // "姓名：李四"
    • 根据据当前所在的对象不同，this 的指向也不同 
      • function f() {
    return ‘姓名：‘+ this.name;
}

var A = {
    name: ‘张三‘,
    describe: f
};

var B = {
    name: ‘李四‘,
    describe: f
};

A.describe();    // "姓名：张三"
B.describe();    // "姓名：李四"
    • 一个网页编程的例子 
      • <input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
    if ((obj.value < lowval) || (obj.value > hival))
        console.log(‘Invalid Value!‘);
}
</script>// 一个文本输入框，每当用户输入一个值，就会调用onChange回调函数，验证这个值是否在指定范围。// 浏览器会向回调函数传入当前对象，因此 this 就代表传入当前对象（即文本框），然后就可以从 obj.value 上面读到用户的输入值

         JavaScript 支持运行环境动态切换，也就是说，this的指向是动态的，没有办法事先确定到底指向哪个对象

  • this 实质
  • var obj = { foo:  5 };
// 原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。
// 举例来说，上面例子的 foo 属性，实际上是以下面的形式保存的

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}
    • 有 this 的设计，跟内存里面的数据结构有关系

      • 由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行
      • 由于函数可以在    不同的运行环境（上下文）  执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）
      • 所以，this 就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。 
        • var f = function () {
    console.log(this.x);
}

var x = 1;
var obj = {
    ff: f,
    x: 2,
};

// 单独执行
f();    // 1

// obj 环境执行
obj.ff();    // 2
    • 几个使用场合下，this 的指向
      • 全局环境

        • 全局环境使用this，它指的就是顶层对象window
        • 不管是不是在函数内部，只要是在全局环境下运行，this 就是指顶层对象window 
      • 构造函数
        • 构造函数中的 this ，指的是实例对象构造函数中的 this ，指的是实例对象
      • 方法调用时
        • this 指向调用该对象的对象。
      • call() 和 apply() 时
        • 指向指定的对象
    • 由于 this 的指向是不确定的，所以切勿在函数中包含多层的 this 

      • 使用一个变量固定 this 的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握
      • var o = {
    f1: function () {
        console.log(this);
        var f2 = function () {
            console.log(this);
        }();
    }
}

o.f1();
// Object
// Window
      • 使用一个变量固定 this 的值，然后内层函数调用这个变量

        var o = {
    f1: function() {
        console.log(this);
        var that = this;
        var f2 = function() {
            console.log(that);
        }();
    }
}

o.f1()
// Object
// Object

// 以上代码等价于var temp = function () {    console.log(this);};
        var o = {
  f1: function () {
    console.log(this);
    var f2 = temp();
  }
}
         
      • 严格模式下，如果函数内部的 this 指向顶层对象，就会报错。
    • 避免数组处理方法中的 this

      • 数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this
      • 如果有
        • 使用中间变量固定this
        • 将 this 当作 foreach( , this) 方法的第二个参数，固定它的运行环境
        • var o = {
    v: ‘hello‘,
    p: [ ‘a1‘, ‘a2‘ ],
    f: function f() {
        this.p.forEach(function (item) {
            console.log(this.v + ‘ ‘ + item);
        });
    }
}

o.f()
// undefined a1
// undefined a2

// 解决方法1    使用变量固定 this
var o = {
    v: ‘hello‘,
    p: [ ‘a1‘, ‘a2‘ ],
    f: function f() {
        var that = this;
        this.p.forEach(function (item) {
            console.log(that.v+‘ ‘+item);
        });
    }
}

o.f()
// hello a1
// hello a2

// 解决方法2    forEach( , this)
var o = {
    v: ‘hello‘,
    p: [ ‘a1‘, ‘a2‘ ],
    f: function f() {
        this.p.forEach(function (item) {
            console.log(this.v + ‘ ‘ + item);
        }, this);
    }
}

o.f()
// hello a1
// hello a2
    • 回调函数中的 this 往往会改变指向，最好避免使用 
        • var o = new Object();
o.f = function () {
    console.log(this === o);
}

// jQuery 的写法
$(‘#button‘).on(‘click‘, o.f);

          上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。

    • 固定 this 指向

JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向

      • Function.prototype.call()
    • 函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数 
      • var obj = {};

var f = function () {
    return this;
};

f() === window    // true
f.call(obj) === obj    // true
    • call 方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象
    • 如果 call 方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入 call 方法

      • var f = function () {
    return this;
};

f.call(5)
// Number {[[PrimitiveValue]]: 5}
    • call 方法还可以接受多个参数    func.call(thisObj, arg1, arg2, ...)
      • 后面的参数是函数调用时所需的参数
      • function add(a, b) {
    return a + b;
}

add.call(this, 1, 2);    // 3
    • 应用 之 调用对象的原生方法 
      • var obj = {};
obj.hasOwnProperty(‘toString‘);    // false

// 覆盖掉继承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
    return true;
};
obj.hasOwnProperty(‘toString‘);    // true
// hasOwnProperty是obj对象继承的方法，如果这个方法一旦被覆盖，就不会得到正确结果

// 将hasOwnProperty方法的原始定义放到obj对象上执行，这样无论obj上有没有同名方法，都不会影响结果
Object.prototype.hasOwnProperty.call(obj, ‘toString‘);    // false
      • Function.prototype.apply()
    • 与 call 方法类似，也是改变 this 指向，然后再调用该函数。
    • 唯一的区别就是，它只有 2 个参数，第二个参数接收一个数组作为函数执行时的参数    func.call(thisObj, [arg1, arg2, ...])
      • 第一个参数也是 this 所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象
    • 很多有趣的应用
      • 找出数组最大元素

        • var a = [10, 2, 4, 15, 9];

// 结合使用apply方法和Math.max方法，就可以返回数组的最大元素
Math.max.apply(null, a);    // 15
      • 将数组的空元素变为 undefined 
        • // 利用 Array构造函数 和 apply结合
// 将数组的空元素变成undefined
Array.apply(null, [‘a‘, ,‘b‘]);    // [ ‘a‘, undefined, ‘b‘ ]

          空元素与undefined的差别在于，数组的forEach方法会跳过空元素，但是不会跳过undefined

      • 转换类似数组的对象
        • 利用数组对象的slice方法，将一个类似数组的对象（比如arguments对象）转为真正的数组
        • // 前提是
    //被处理的对象必须有length属性
    //以及相对应的数字键
Array.prototype.slice.apply({0: 1, length: 1});    // [1]
Array.prototype.slice.apply({0: 1});    // []
Array.prototype.slice.apply({0: 1, length: 2});    // [1, undefined]
Array.prototype.slice.apply({length: 1});    // [undefined]
      • 绑定回调函数的对象 
        • var o = new Object();

o.f = function () {
    console.log(this === o);
}

var f = function (){
    o.f.apply(o);    // 或者 o.f.call(o);
};

// jQuery 的写法
$(‘#button‘).on(‘click‘, f);

//点击按钮以后，控制台将会显示true。
// 由于apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内。
// 更简洁的写法是采用下面介绍的bind方法。
      • Function.prototype.bind()
    • 用于将函数体内的 this 绑定到某个对象，然后返回一个新函数 
        • var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

// 因为getTime方法内部的this，绑定Date对象的实例，赋给变量print以后，内部的this已经不指向Date对象的实例了

          bind方法可以解决这个问题

          • var print = d.getTime.bind(d);
print();    // 1481869925657

            bind 方法将 getTime 方法内部的 this 绑定到 d 对象，这时就可以安全地将这个方法赋值给其他变量了

    • bind 方法的参数就是所要绑定 this 的对象
    • 下面是一个更清晰的例子 
      • var counter = {
    count: 0,
    inc: function () {
        this.count++;
    }
};

var func = counter.inc.bind(counter);
func();
counter.count    // 1

        counter.inc() 方法被赋值给变量 func 。这时必须用 bind 方法将 inc 内部的 this，绑定到 counter，否则就会出错

    • this绑定到其他对象也是可以的 
      • var counter = {
    count: 0,
    inc: function () {
        this.count++;
    }
};

var obj = {
    count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count    // 101
    • bind 还可以接受更多的参数，将这些参数绑定原函数的参数 
      • var add = function (x, y) {
    return x * this.m + y * this.n;
}

var obj = {
    m: 2,
    n: 2
};

var newAdd = add.bind(obj, 5);
newAdd(5)    // 20

        bind() 方法除了绑定 this 对象，还将 add 函数的第一个参数 x 绑定成 5，然后返回一个新函数 newAdd()，这个函数只要再接受一个参数 y 就能运行了

    • 如果bind() 方法的第一个参数是 null 或 undefined，等于将 this 绑定到全局对象，函数运行时 this 指向顶层对象（浏览器为window） 
      • function add(x, y) {
    return x + y;
}

var plus5 = add.bind(null, 5);
plus5(10);    // 15

        上面代码中，函数 add 内部并没有 this，使用 bind() 方法的主要目的是绑定参数 x，以后每次运行新函数 plus5，就只需要提供另一个参数 y 就够了。

      • 而且因为 add 内部没有 this，所以 bind() 的第一个参数是 null，不过这里如果是其他对象，也没有影响
    • bind() 使用注意

      • 每一次返回一个新函数

        • bind方法每运行一次，就返回一个新函数，这会产生一些问题。
        • 比如，监听事件的时候，不能写成下面这样 
          • element.addEventListener(‘click‘, o.m.bind(o));
// 上面代码中，click事件绑定bind方法生成的一个匿名函数。

// 这样会导致无法取消绑定，所以，下面的代码是无效的
element.removeEventListener(‘click‘, o.m.bind(o));

// 正确写法
var listener = o.m.bind(o);
element.addEventListener(‘click‘, listener);
//  ...
element.removeEventListener(‘click‘, listener);
      • 结合回调函数使用
        • 回调函数是 JavaScript 最常用的模式之一，
        • 但是一个常见的错误是，将包含 this 的方法直接当作回调函数 
          • var counter = {
    count: 0,
    inc: function () {
        ‘use strict‘;
        this.count++;
    }
};

function callIt(callback) {
    callback();
}
// 上面代码中，callIt方法会调用回调函数。// 这时如果直接把counter.inc传入，调用时counter.inc内部的this就会指向全局对象。
callIt(counter.inc.bind(counter));    // 使用bind方法将counter.inc绑定counter以后，就不会有这个问题，this总是指向counter
counter.count    // 1
        • 某些数组方法可以接受一个函数当作参数。这些函数内部的this指向，很可能也会出错 
          • var obj = {
    name: ‘张三‘,
    times: [1, 2, 3],
    print: function () {
        this.times.forEach(function (n) {
            console.log(this.name);
        });
    }
};

obj.print();    // 没有任何输出
// obj.print内部this.times的this是指向obj的，这个没有问题。

// 但是，forEach方法的回调函数内部的this.name却是指向全局对象，导致没有办法取到值。
obj.print = function () {
    this.times.forEach(function (n) {
        console.log(this === window);
    });
};

obj.print()
// true
// true
// true

            解决方法

            • // 通过bind方法绑定this
obj.print = function () {
    this.times.forEach(function (n) {
        console.log(this.name);
    }.bind(this));
};

obj.print()
// 张三
// 张三
// 张三
      • 结合call方法使用
        • 利用bind方法，可以改写一些 JavaScript 原生方法的使用形式，以数组的slice方法为例

          • [1, 2, 3].slice(0, 1);    // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1);    // [1]

            call方法实质上是调用Function.prototype.call方法，因此上面的表达式可以用bind方法改写

            • var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1);    // [1]
            • var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);

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

pop(a)
a    // [1, 2, 3]
        • 如果再进一步，将 Function.prototype.call 方法绑定到 Function.prototype.bind 对象，就意味着 bind 的调用形式也可以被改写 
          • function f() {
    console.log(this.v);
}

var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)();    // 123

            所以bind方法就可以直接使用，不需要在函数实例上使用

Function.prototype.call()

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9800549.html

时间： 2024-10-14 01:09:55

__x__(78)1016第十五天__ JavaScript 面向对象的相关文章

__x__(79)1016第十五天__ JavaScript 对象的继承

对象的继承 大部分面向对象的编程语言,都是通过“类”(class)实现对象的继承. 传统上,JavaScript 语言的继承不通过 class,而是通过“原型对象”(prototype)实现,称之为 JavaScript 的原型链继承 JavaScript 继承机制的设计思想就是,原型对象 prototype 的所有属性和方法,都能被实例对象共享 ES6 引入了 class 语法 构造函数的缺点 同一个构造函数的多个实例之间,无法共享属性,从而造成对系统资源的浪费 function Cat(na

第十五篇：JavaScript 之 Dom操作

一.后台管理页面布局 二.JavaScript函数 三.eval以及时间操作 四.JavaScript作用域 五.JavaScript面向对象模型 六.DOM选择器 七.DOM事件操作 八.DOM绑定事件的分离绑定方法 原文地址:https://www.cnblogs.com/hanfuming/p/8359285.html

第一百四十五节，JavaScript，同步动画

JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属性值为对象,对象里面是,动画方式:目标量,组合的键值对,只能动画方式加目标量的键值对 /** yi_dong_tou_ming()方法,动态改变css属性说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x将元素横向左移动或者右移动 * 2, y将元素竖向

第一百三十五节，JavaScript，封装库--拖拽

JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; * 无参 **/ feng_zhuang_ku.prototype.tuo_zhuai = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < th

__x__(36)0908第五天__背景 background

1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 background-image: url(img/cat.gif); 如果图片大于元素,则会显示图片左上角部分. 如果图片和元素一样大,则会全部显示. 如果图片小于元素,则图片会 x 横向, y 纵向 平铺 铺满元素. 可以同时设置background-color,作为图片的底色. 4. 背景图片重复方式 

__x__(37)0909第五天__背景图按钮

link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Sprite 雪碧图: 将三张图片整合为一张图片,在不同的伪类中通过设置 background-position 来切换图片. 一次请求一次加载,一次加载一张图片,相当于多张图片. 优势: 减小资源的大小,省了颜色表 提高了访问效率 实例效果: html代码: <!doctype html> <ht

__x__(41)0909第五天__长表格

长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没写 tbody ,浏览器会自添加 tbody,并将所有的 tr 移入 tbody 好处: 可以分别设置样式. 打印时,利用分类处理多页表头,表尾的效果. 无顺序要求,已维护. 效果图: css代码: @charset "utf-8"; *{ margin: 0px; padding: 0p

无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一定要用到非常熟练才可以,今天我们会通过一个员工信息表实例,再把这些组件串一下. (1)TextField  (2)Botton  (3)NumberField (4)Hidden (5)DataFiedl (6)RadioGroup (7)CheckBoxGroup (8)Combobox (9)F

经典算法题每日演练——第二十五题 块状链表

原文:经典算法题每日演练--第二十五题 块状链表 在数据结构的世界里,我们会认识各种各样的数据结构,每一种数据结构都能解决相应领域的问题,每一种数据结构都像 是降龙十八掌中的某一掌,掌掌毙命... 当然每个数据结构,有他的优点,必然就有它的缺点,那么如何创造一种数据结构 来将某两种数据结构进行扬长避短,那就非常完美了.这样的数据结构也有很多,比如:双端队列,还有就是今天讲的 块状链表, 我们都知道 数组 具有 O(1)的查询时间,O(N)的删除,O(N)的插入... 链表 具有 O(N)的查询时