Javascript面向对象篇

 1 表达式的概念

• 广义的概念:所有返回的一段代码块,都可以成为表达式.比如:

  var a=0;
  var a, b;

• a = 0;这个表达式的返回值为0;

• b = a;这个表达式的返回值为a;

• 赋值表达式的返回值为=右边的值;

2  面向对象的概念:

• 一种编程思想.核心:在解决任何问题的时候,首先试图去找到一个对象来帮助解决问题.

• 优点:

1. 身份:调度者;

2. 代码的灵活度高;

3. 可维护性高;

4. 可扩展性高;

• 缺点:

1. 可能造成代码的复杂度提高

2. 可读性相对不好

3  面向过程:

• 身份: 执行者

• 顺序: 一般情况下不能打乱,从上至下一步一步执行.

4  Javascript语言的特点:

• 弱类型

• 多范式

• 基于对象的语言:在js中,一切都是对象

• 基于原形的语言

5  原型的概念

所谓原型形就是一个函数的prototype属性所引用的对象

• 只要声明一个函数,那么原型就存在

  function foo(){};
  foo.prototype['name']='ksir';
  var f = new foo();
  console.log(f.constructor ===foo.prototype.constructor);

• 当通过该函数创建出来的每一个对象,都共享此原型,也就是说上述创建出来的所有对象可以直接访问到原型上的任何成员(属性和方法);
  (对象的动态特性就是对象可以同过.或者[]来动态创建对象);

6  原型的本质

• 原型的本质就是对象

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.talk = function(){
        console.log('hello');
     }
 }
 var kangfeng = new Person('小强',21,'男');
 var xiaoming = new Person('小明',20,'女');
 var xiaohong = new Person('小红','19','女');

 kangfeng.talk();
 xiaoming.talk();
 xiaohong.talk();
 //思考:这三个儿女的talk方法是否一样?
 console.log(xiaoming.talk === kangfeng.talk);
 console.log(xiaohong.talk === xiaohong.talk):
 //这三个对象的方法是不一样,相互独立的
 Person.prototype.addfu(){
    console.log('给原型添加一个函数');
}

• 在构造函数中存在相同的逻辑代码,然后再创建对象的时候,会拷贝该函数中的代码逻辑,把构造函数内的方法提取出来放在一个公共的地方,这个公共的地方是该构造函数创建出来的对象都能访问,–构造函数的所有对象能够共享构造函数的原型。

• 优点:实现同类对象的数据共享

7  获取原型的方式

• 通过函数:

<fnName>.prototype;

• 通过对象:

object.__proto__;
//两个下划线

8  对象的组成部分

对象本身;他的原型

• 每一个对象都有__proto__属性,也就是说每一个对象都有原型

• Math.__proto__===object.prototype;

• 对象的类型就是构造函数的名字

9  原型属性&原型对象

• 原型属性:站在函数的角度,原型可以被称为该函数的原型属性

• 原型对象:站在对象的角度,原型可以被称为该对象的原型对象

10 __proto__双下划线标准

__proto__这种双下划线的标准不是w3c的标准,这些属性都是非标准属性。

有兼容性问题。如果我们无法通过通过双下划线获取原型属性的时候,我们就得通过函数来获取它 

function getPrototype(obj){
    //判断浏览器是否兼容__proto__属性
    //return !!obj.__proto__? obj.__proto__:obj.constructor.prototype;
    if(obj.__proto__){
    //支持
        return obj.__proto__;
    }else{
        //获取该对象的构造函数
        //在通过此函数的prototype属性获取其原型对象
        return obj.constructor.prototype;
    }
}

function A(){};
var a = A();
console.log(getPrototype(a).constructor);
//如果我们的函数中有if else return结构,我们可以用3元运算符来优化.

11  标准构造函数的写法

//哪些属性要保存在构造函数的内部,哪些属性需要提取出来放放原型上

function B(name){};
B.prototype.name = 'tom';
var tom = new B;
console.log(tom.name);
var jim = new jim;
console.log(jim.name);
//结果都是tom
//所以和具体某个对象息息相关的称为私有属性,这写属性都必须写在构造函数内,那些共享的属性(每个对象都具有的属性,不会随对象变化而变化,比如说一些方法(对象的行为)--公有属性)就可以定义在原型属性中.
//一般情况下,构造函数的方法放原型上
//不提倡在js原生对象上进行扩展成员
//坏处,会导致原生对象过于庞大,累赘,影响性能

12  注意点

• 给构造函数添加方法一般添加在原型上,为了方便,一般将方法以对象的形式添加到 <构造函数名>.prototype{}里面,同时,不要忘了添加constructor: 构造函数名 键值对形式。

13  原型的特性

动态性:

• 给原型扩展成员会直接反应到已创建的对象身上

• 替换原型对象,不会反应到已创建出来的对象,但是会直接影响之后创建出来的对象

唯一性

• 由同一函数创建出来的所有对象,共享同一个原型对象

不可变性:

• 对象是无法改变原型对象上的任何成员

继承性:

• 所有对象都继承自它的原型对象

文章来源：web前端开发视频课程 http://www.qianduanshiping.com