js面向对象总结

原型链

新创建的xiaoming的原型链是：

xiaoming ----> Student.prototype ----> Object.prototype ----> null
也就是说，xiaoming的原型指向函数Student的原型。如果你又创建了xiaohong、xiaojun，那么这些对象的原型与xiaoming是一样的：

xiaoming ↘
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun  ↗

用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

构造函数、原型对象、实例对象

for in可以得到对象的实例属性与原型属性
Object.keys()：获取属性的字符串组

公有私有属性

//对象构造函数
// 私有属性好处： 安全 就类似闭包中的函数一样 减少污染
function Person(name) {
    //私有属性，只能在对象构造函数内部使用
    var className = "用户对象";
    //公有属性,在对象实例化后调用
    this.name = name;
    //私有方法
    var privateFunction = function () {
        alert(this.name);
        //公有属性
        alert(className); //正确 直接通过变量名访问
        alert(this.className); //undefined 错误 不能这样访问
    }
    //公有方法
    this.publicFunction = function () {
        alert(this.name); //公有属性
        alert(className); //正确 直接通过变量名访问
        alert(this.className); //undefined 错误 不能这样访问
    }
}

数据属性、访问器属性:
 var person = {
    _year: 2004
}
Object.defineProperty(person, 'name', {
    //configurable: false,
    //value: 'Nicholas',
    get: function () {
        return this._year;
    },
    set: function (value) {
        if (value < 2016) {
            alert('非法值')
            return
        }
        this._year = value
    }
})

类型检查

1. 在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。
console.log(typeof undefined)//'undefined'
console.log(typeof null) // 'object'
console.log(typeof true) //'boolean'
console.log(typeof 123)  //'number'
console.log(typeof "abc")  //'string'
console.log(typeof function () {}) //'function'
console.log(typeof {}) //'object'
console.log(typeof [])//'object'
console.log(typeof unknownVariable) //'undefined'

2. 框架开发必用，五星级知识点
console.log(toString.call(123)) //[object Number]
console.log(toString.call('123')) //[object String]
console.log(toString.call(undefined)) //[object Undefined]
console.log(toString.call(true)) //[object Boolean]
console.log(toString.call({})) //[object Object]
console.log(toString.call([])) //[object Array]
console.log(toString.call(function () {})) //[object Function]

3.  判断已知对象类型的方法： instanceof
var arr = new Array()
console.log(arr instanceof Array)     //---------------> true
console.log(date instanceof Date)     //---------------> true
console.log(fn instanceof Function)   //------------> true
alert(f instanceof function)        //------------> false
注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

4. jQuery中使用
jQuery提供一系列工具方法，用来判断数据类型，以弥补JavaScript原生的typeof运算符的不足
以下方法对参数进行判断，返回一个布尔值。
jQuery.isArray()：是否为数组。
jQuery.isEmptyObject()：是否为空对象（不含可枚举的属性）。    jQuery.isFunction()：是否为函数。
jQuery.isNumeric()：是否为数字。
jQuery.isPlainObject()：是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。
jQuery.isWindow()：是否为window对象。
jQuery.isXMLDoc()：判断一个DOM节点是否处于XML文档之中。

值类型、引用类型

值类型存放在栈内存空间，引用类型存放在堆内存空间，与C#一致

function show(x) {
        console.log(typeof(x));    // undefined 值类型
        console.log(typeof(10));   // number 值类型
        console.log(typeof(‘abc’)); // string 值类型
        console.log(typeof(true));  // Boolean 值类型
        console.log(typeof(function () { }));  //函数 引用类型
        console.log(typeof([1, ‘a’, true]));  //数组  引用类型
        console.log(typeof ({ a: 10, b: 20 }));  //object 或者json  引用类型
        console.log(typeof (null));  //null  引用类型
        console.log(typeof (new Number(10)));  //内置对象 引用类型
    }
    show();
其中上面的四种（undefined, number, string, boolean）属于值类型，不是对象。
函数、数组、对象、null、new Number(10)都是对象。他们都是引用类型。

Object

Object.create()
Object.defineProperty()
Object.defineProperties()

person.hasOwnProperty('name');  //判断是否是实例属性

Object.getPrototypeOf(person)==Person.prototype  //判断原型对象
Person.prototype.isPrototypeOf(person)           //判断原型对象

BOM对象

windows ，document ，location ，history

Window 内置全局属性和方法

全局常量: Infinity, NaN, undefined, null
全局方法: eval(), isFinite(), isNaN(), parseFloat(), parseInt(),decodeURI(),decodeURIComponent(), encodeURI(), encodeURIComponent()，setTimeout(),clearTimeout(),setInterval(),clearInterval()

Location对象

function Location （）{
    this.href       URL
    this.port       端口号
    this.protocol   协议
    this.host
}
Location.prototype={
    reload:function(){}  表示重新加载当前页面
}

属性：
hash 设置或返回从井号 (#) 开始的 URL（锚）
host 设置或返回主机名和当前 URL 的端口号
hostname 设置或返回当前 URL 的主机名
href 设置或返回完整的 URL
pathname 设置或返回当前 URL 的路径部分
port 设置或返回当前 URL 的端口号
protocol 设置或返回当前 URL 的协议
search 设置或返回从问号 (?) 开始的 URL（查询部分）
方法
assign()
加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的

reload()
重新加载当前文档
如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。
如果文档未改变，则该方法将从缓存中装载文档。
这与用户单击浏览器的刷新按钮的效果是完全一样的。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

replace()
用新的文档替换当前文档，replace() 方法不会在 History 对象中生成一个新的纪录。
当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

location.href和search区别

location.href 返回完整的 URL。 如：http://www.cftea.com/foo.asp?p=1
location.search 是从当前URL的?号开始的字符串。如:http://www.51js.com/viewthread.php?tid=22720，它的search就是?tid=22720

History

go(-2)      返回上一页
.back()     后退
.forward()  前进 

eval

将字符串当做js代码执行
eval('var numm=2')
console.log(num+2) 结果为4

创建对象的方式

1. Object
var object=new Object()

2. 构造函数
 function Person(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
}

3. 原型模式
function Person(){
}

Person.prototype.name='lbi';
Person.prototype.age=28;
Person.prototype.address='shenzhen';

4.组合使用构造函数模式和原型模式
function Person(name,age,address){
    this.name=name;
    this.age=age;
    this.address=address;
}

Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
note:使用最广泛的方式

4. 工厂模式
 function createPerson(name,age,address) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.address = address;

    return obj;
}

var person=createPerson('lbi',28,'shenzhen');

5. 内置对象

6. 拷贝

7. 第三方

prototype:指向原型对象
[[Prototype]]:实例对象所拥有的，指向原型对象的指针 也即__proto__

实例中无法访问到[[Prototype]]，可以通过以下两个方式访问：
var person1=new Person();
Object.getPrototypeOf(person1)==Person.prototype   //true
Person.prototype.isPrototypeOf(person1)            //true 

继承

1. 原型链
function SuperType() {
    this.colors=['red','blue','green'];
}

function SubType() {
}

SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors);  //red,blue,green,black

var instance2 = new SubType();
console.log(instance2.colors);  //red,blue,green,black

console.log(Object.getPrototypeOf(subtype));

原型链存在的问题：
1. 引用类型的属性被实例所共享
2. 创建子类型的实例时，无法向父类型的构造函数传递参数

2. 借用构造函数
function SuperType(name){
    this.name=name;
    this.colors=['red'.'blue'.'green'];
}

function SubType(){
    //继承了SuperType，同时传递参数
    SuperType.call(this,'lbi');
}

var instance1=new SubType();
instance.colors.push('black');
console.log(instance1.colors);  //red,blue,green,black

var instance2=new SubType();
console.log(instance2.colors);  //red,blue,green

借用构造函数存在的问题：
1. 在父类型的原型中定义的方法，对子类型是不可见的，所有类型只能使用构造函数模式

3. 组合继承
function SuperType(name){
    this.name=name;
    this.colors=['red'.'blue'.'green'];
}

function SubType(){
    //继承了SuperType，同时传递参数
    SuperType.call(this,'lbi');
}

SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors);  //red,blue,green,black

var instance2 = new SubType();
console.log(instance2.colors);  //red,blue,green

4. 寄生组合继承
function inherits(subType, superType) {
    function F() {
    }
    F.prototype = superType.prototype;
    subType.prototype = new F();
    subType.prototype.constructor = subType;
}

function Student(name) {
    this.name = name;
}

function PrimaryStudent(name) {
    Student.call(this, name);
    this.grade = 90;
}

inherits(PrimaryStudent, Student);

PrimaryStudent.prototype.sayHello = function () {
    console.log('test');
};

伪数组的定义

1. 伪数组就是一个包含length属性的json对象 他不是一个真数组
其实都是在模拟一个集合（描述集合数据）
举例：
var json = {1:'苹果'，2:'香蕉',3:'菠萝',length:3}
Var arr = ['苹果','香蕉','菠萝']
他的特点：
1，key都是1，2，3，4 ，5
2, 他含有一个length属性

2. 他和真数组的联系：
都是模拟集合
伪数组每次都要自己去计算length个数，自己去拼装对象
数组：push pop join slice shift unshift concact sort 

3. 既然没有数组好，为什么要出现伪数组
因为如下的 集合其实都是伪数组：
1，argumengs
document.getElementByTagName
document.getElementByClassName
Jquery的框架其实就是伪数组实现的。
$('.class')
Var json = {1:dom对象，2：dom对象，3：dom对象，length：3}
for(var item in json){
}

4. 如何将伪数组转为真数组
更改slice的指向指向
可以读slice的源码--了解奥秘

call

call的this:
call除了可以借用别人的方法之外，还能够更改方法的this指向，指向自身

apply

apply的功能和call一模一样，但是只有一点不一样：
call的传参是平铺的，apply是把所有参数放在一个数组里面的传递的