OOP之类与对象

# 对象

# 对象的含义

所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成

# 对象的创建

使用new运算符创建Object

var p = new Object();
p.name = "Tony";

@前端进阶之旅: 代码已经复制到剪贴板

使用对象字面量的形式

//对象字面量形式
var p ={
    name: "tony",
    work: function(){
        console.log("working....");
    },
    _age: 18,
    get age(){
        return this._age;
    },
    set age(val){
        if( val <0 || val > 150){
            throw new Error("invalid value");
        }else{
            this._age = val;
        }
    }
}
console.log(p.name);

@前端进阶之旅: 代码已经复制到剪贴板

# 对象的基本操作

成员属性的添加

// Object.defineProperty()方法
Object.defineProperty(p, "age",{value: 18, writable: false});
//Object.defineProperties()方法 添加多个属性
Object.defineProperties(p, {
    salary:{
        value: 1000,
        writable: false
    },
    gender:{
        value: true
    }
});

@前端进阶之旅: 代码已经复制到剪贴板

成员的遍历
- 使用 for..in语句
- Object.keys()方法返回一个包含对象键名的字符串数组

var o ={};
o.name = "jack";
o.age = 20;
for(var i in o){
    console.log(o[i]);
} // jack, 20
Object.keys(o); // ["name", "age"]

@前端进阶之旅: 代码已经复制到剪贴板

检查对象是否有某个属性
- in 操作符
- Object.hasOwnProperty()方法

var o = {name: "mariya"}
"name" in o; // true
o.hasOwnProperty("name"); // true

@前端进阶之旅: 代码已经复制到剪贴板

得到对象的属性特性描述 Object.getOwnPropertyDescriptor(obj,property)

Object.getOwnPropertyDescriptor(o, "name");
//Object {
//    value: "mariya", writable: true, enumerable: true, configurable: true
}

@前端进阶之旅: 代码已经复制到剪贴板

删除属性
- delete运算符,但有些对象的属性是删除不了的

delete o.name; //true
o.name;  // undefined

@前端进阶之旅: 代码已经复制到剪贴板

# Constructor属性

constructor始终指向创建当前对象的构造函数

    var arr = [];
    console.log(arr.constructor === Array); // true
    var Foo = function() {};
    console.log(Foo.constructor === Function); // true
    // 由构造函数实例化一个obj对象
    var obj = new Foo();
    console.log(obj.constructor === Foo); // true
    console.log(obj.constructor.constructor === Function); // true

@前端进阶之旅: 代码已经复制到剪贴板

每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数

# 类的创建

虽然js是门基于对象的语言，但是没有类这一概念的，虽然保留了class的关键字，但在ES6之前是无法使用的。所以，可以用构造函数模拟类的创建，也就是伪类。
所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上
每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承

//构造函数模式
function Person(age, name){ //Class
    this.age = age;
    this.name = name;
}
//将公共的属性或方法放在prototype属性上
Person.prototype.headCount = 1;
//创建实例对象
var p = new Person(19, 'johnsom');
var p1 = new Person(20, 'allen');

@前端进阶之旅: 代码已经复制到剪贴板

# this

this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。我们还可以使用apply和call两个全局方法来改变函数中this的具体指向

# 全局代码中的this

console.log(this === window); //true 全局范围内使用this指向window对象

@前端进阶之旅: 代码已经复制到剪贴板

# 普通的函数调用

function f(){
this.name = "tony"; // this在运行时指向window对象,在严格模式下则是undefined
}

@前端进阶之旅: 代码已经复制到剪贴板

# 在对象中使用

var o = {
    name: "tony",
    print: function(){
        console.log(this.name);  //this指向对象o，但是可以改变其指向
    }
};

@前端进阶之旅: 代码已经复制到剪贴板

# 作为构造函数

new F(); // 函数内部的this指向新创建的对象。

@前端进阶之旅: 代码已经复制到剪贴板

# 多层嵌套的内部函数

var name = "global";
var person = {
    name : "person",
    hello : function(sth){
        var sayhello = function(sth) {
            console.log(this.name + " says " + sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");//global says hello world

@前端进阶之旅: 代码已经复制到剪贴板

在内部函数中，this没有按预想的绑定到外层函数对象上，而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self：

var name = "global";
var person = {
    name : "person",
    hello : function(sth){
        var that = this;
        var sayhello = function(sth) {
            console.log(that.name + " says " + sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");//person says hello world

@前端进阶之旅: 代码已经复制到剪贴板

# 事件中的this

var ele = document.getElementById("id");
ele.addEventListener('click',function(){
    console.log(this);  //this指向dom元素
});

@前端进阶之旅: 代码已经复制到剪贴板

# 使用apply和call改变this的指向

apply和call类似，只是后面的参数是通过一个数组传入，而不是分开传入。两者都是将某个函数绑定到某个具体对象上使用，自然此时的this会被显式的设置为第一个参数。两者的方法定义：

call( thisArg [，arg1，arg2，… ] );  // 参数列表，arg1，arg2，...
apply(thisArg [，argArray] );     // 参数数组，argArray

@前端进阶之旅: 代码已经复制到剪贴板

var name = 'global';
var o = {
    name: 'job',
    getName: function(){
        console.log(this.name);
    }
};
o.getName(); // job

//用call或apply改变函数中this的指向
o.getName.call(this); // global

@前端进阶之旅: 代码已经复制到剪贴板

简单的总结：
- 当函数作为对象的方法调用时，this指向该对象。
- 构造函数中的this指向新创建的对象
- 嵌套函数中的this不会继承上层函数的this，如果需要，可以用一个变量保存上层函数的this

# bind（）

该方法创建一个新函数，称为绑定函数，绑定函数会以创建它时传入bind方法的第一个参数作为this，传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

$("#ele").click(person.hello.bind(person));
//相应元素被点击时，输出person says hello world

@前端进阶之旅: 代码已经复制到剪贴板

//对象字面量形式 var p ={ name: "tony", work: function(){ console.log("working...."); }, _age: 18, get age(){ return this._age; }, set age(val){ if( val <0 || val > 150){ throw new Error("invalid value"); }else{ this._age = val; } } } console.log(p.name);

// Object.defineProperty()方法 Object.defineProperty(p, "age",{value: 18, writable: false}); //Object.defineProperties()方法添加多个属性 Object.defineProperties(p, { salary:{ value: 1000, writable: false }, gender:{ value: true } });

var arr = []; console.log(arr.constructor === Array); // true var Foo = function() {}; console.log(Foo.constructor === Function); // true // 由构造函数实例化一个obj对象 var obj = new Foo(); console.log(obj.constructor === Foo); // true console.log(obj.constructor.constructor === Function); // true

//构造函数模式 function Person(age, name){ //Class this.age = age; this.name = name; } //将公共的属性或方法放在prototype属性上 Person.prototype.headCount = 1; //创建实例对象 var p = new Person(19, 'johnsom'); var p1 = new Person(20, 'allen');

var name = "global"; var person = { name : "person", hello : function(sth){ var sayhello = function(sth) { console.log(this.name + " says " + sth); }; sayhello(sth); } } person.hello("hello world");//global says hello world

var name = "global"; var person = { name : "person", hello : function(sth){ var that = this; var sayhello = function(sth) { console.log(that.name + " says " + sth); }; sayhello(sth); } } person.hello("hello world");//person says hello world

var name = 'global'; var o = { name: 'job', getName: function(){ console.log(this.name); } }; o.getName(); // job //用call或apply改变函数中this的指向 o.getName.call(this); // global