JS面向对象(基础)

一、面向过程和面向对象的区别、联系

1.面向过程编程:注重解决问题的步骤,分析问题需要的每一步,实现函数依次调用。

2.面向对象编程:注重问题中的对象,分析问题中对象的联系,实现对象间的通讯解决问题.面向对象编程淡化过程,强调对象 更贴近我们人日常处理问题的方式。

3.面向过程:所有功能都是在需要使用的时候才开发,相当于去餐馆点菜,现点现做,需要等。

4.面向对象:在正式开发之前,就先把所有需要使用的功能都开发好,并以属性或者方法的形式存放

在一个对象中,在实际开发的时候根据需要来调用写好的功能。相当于去快餐店吃快餐,菜都是

事先已经炒好的,去了就可以吃。


二、什么是对象?什么是面向对象?

1.对象是类的实例。对象是具体的事物。

2.只有对象才有属性和方法,基本数据类型没有,string等类型能够使用的方法来自他自身的构造器,在基本数据类型调用方法时会临时创建一个对象出来,在方法完成时自动销毁。

3.对象,黑盒子,是一个整体,对外提供一些操作,不了解内部的结构,知道表面的各种操作(按钮)。

4.面向对象简单的来说就是:不了解原理的情况下,会使用功能。面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用。

5.面向对象编程也叫OOP,特点:①抽象,抓住核心问题,把最主要的、跟问题相关的特征抽出来。②封装:不考虑内部实现,只考虑功能使用。简单说:就是看不到里面的东西,用好表面的功能。③继承(遗传):从已有对象上,继承出新的对象。多重继承。多态。从父类上继承出一些方法、属性,子类,又有一些自己的特性。多重继承:可以同时继承多种父级的特性

6.对象的组成:①方法--函数:过程、动态的②属性--变量:状态、静态的。

7.变量和属性的不同:变量是自由的,不属于任何人。属性是有归属的,属于一个对象的。

//定义一个对象

//直接量

//var obj={};

//使用Object声明对象

var  obj= new   Object();

//覆盖式的定义方式,

var    person={

name:"张三",

age:"18",

hobby:function() {

console.log("我喜欢篮球");

}

}

//后面的会覆盖前面的

//var person = {

//name: "李四"

//}

//追加属性和方法

person.height="178cm";

console.log(person)

//调用

person.hobby();

console.log(person.name);

对象数组,一个数组里面有多个对象

var  phoneNumber=[{

name:"coco",

tel:"132432432"

}, {

name:"popo",

tel:"5840583"

}]

//取到里面的东西

//console.log(phoneNumber[0].name)

//如果数据比较多,需要用循环

for  (var  i=0; i<phoneNumber.length;i++){

console.log(phoneNumber[i].name);

}

var   person={

name:"张三",

height:"189cm"

}

//获取对象里面的东西,如果数据比较多,也可以循环

//key下标         value值

for(var  k   in   person) {

console.log(k);//对象的下标

console.log(person[k]);//获取单个值

}


三、工厂模式

并不常用,每次调用函数都重新定义了函数,(函数重复,资源浪费)

//工厂模式

function    factory(name,age) {//类

var   obj={};

obj.name=name;

obj.age=age;

obj.hobby=function() {

console.log("sing");

}

return     obj;

}

//直接调用

factory().hobby();//sing

//用参数接收调用

var     newFactory=factory("张三","18");//对象

newFactory.hobby();

console.log(newFactory.name);

//不用传参,用arguments,如果参数不确定的情况下,就用arguments

function   factory() {

//console.log(arguments);

var   obj={};

obj.name=arguments[0];

obj.age=arguments[1];

obj.hobby=function() {

console.log("sing");

}

return   obj;

}


四、构造函数

//创建构造函数,类似于类

function Student(name,sex){

//属性

this.name = name;

this.sex = sex;

//方法

this.intro = function(){

alert("姓名:" + this.name + "\n" + "性别:"+this.sex);

}

}

使用构造函数

//创建对象

var student = new Student("张三","男");

//调用方法

student.intro();

构造函数:用来构建对象的函数。

注意:1.为了区别普通函数,构造函数的函数名首字母规定应该为大写。2.构造函数必须使用new运算符来调用执行(实例化对象)。3.在构造函数里面写属性,在原型里面写方法


五、原型

1.通过new实例化出来的对象,其属性和行为来自于两个部分,一部分来自于构造函数,另一部分来自于原型.

2.当我们声明一个类时,其实同时生成了一个对应的原型.例如我们定义Person这个类时,会产生一个与Person类对应的原型prototype.

3.原型本身就是一个对象。

4.通过prototype可以指向这个原型,原型可以通过constructor指向Person类(构造函数).

function  Dog(){//构造函数

       this.name="大黄";

        this.sex="公";

}

Dog.prototype={//原型

      bark:function(){

      alert("汪汪~");

         }

}

//也可以这样写

//通过构造函数找到原型

Car.prototype={

action1:function() {

console.log("我是方法1")

},

action2:function() {

console.log("我是方法2")

},

}

//原型

//Car.prototype.action = function() {

//console.log("我是原型里的方法");

//}

function  Person() {

this.arr=[1,2,3];

}

//通过原型可以取到构造函数里面的东西

Person.prototype.hobby=function() {

console.log(this.arr);

}

var   newPerson= newPerson();

newPerson.hobby();


六、原型链

1.原型链:原型链是指对象在访问属性或方法时的查找方式。

2.当访问一个对象的属性或方法时,会先在对象自身上查找属性或方法是否存在,如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找 ,依此类推,直到找到为止。如果到顶层对象中还找不到,则返回 undefined。

3.原型链最顶层为 Object 构造函数的 prototype 原型对象,给 Object.prototype 添加属性或方法可以被除 null 和undefined 之外的所有数据类型对象使用。


七、公有和私有

1.在传统的面向对象的语言中一般会提供public、protected、private等关键字来声明属性和方法的

公开性.

2.javascript中没有这些关键字,我们通过作用域来实现公有或者私有。

functionWomen(name,sex){

//公有属性

this.name=name;

this.sex=sex;

//私有属性

var_age="30";

//公有方法

this.eat=function(){

alert("");

}

//私有方法

var  fight=function(){

alert("!");

}

}

对于上述例子中,使用this.xxx定义的属性和方法是公有的,我们在外部使用对象很容进行访问.

使用 var xxx定义的属性和方法是私有的.只能在构造函数内部进行直接访问.


set方法:我们可以通过公有的方法去访问私有的属性.我们把给专门给私有属性赋值的方法称为set方法

get方法:我们把专门获取私有属性的方法称为get方法

function     Women(name){

      this.name=name;

      var     _age="30";

      //set方法

    this.setAge=function(age){

         _age=age;

     }

}

function    Women(name){

      this.name=name;

     var_age="30";

     //get方法

    this.getAge=function(){

        return     _age;

    }

}


八、继承

1.继承的目的是找到类之间的共性,精简代码。

2.原型不能直接被继承

//解决继承中原型的传址问题

function    Dad() {

this.name="杨幂";

this.age=18;

}

Dad.prototype.hobby=function() {

console.log("电视");

}

function    Son() {

this.name="小糯米";

Dad.call(this);

}

//创建一个新的对象就会新引用一个地址

Son.prototype= newDad();

Son.prototype.hobby=function() {

console.log("肉肉");

}

var      newDad= new   Dad();

newDad.hobby();


九、改变this指向

//下面三种方式可以改变this指向

var   o={

name:"张三",

age:"18"

}

function  test(name,age) {

 console.log(this);

}

//这时候this指向window

//test();

//通过call改变函数内部的this指向

//这时候this指向o

//test.call(o)

var    o={

name:"张三",

age:"18"

}

function   test(name,age) {

console.log("姓名"+name+"年龄"+age)

console.log(this);

}

//test.call(o,"张三",18)

//test.apply(o,["李四",36]);//第二个参数需要的是一个数组

//test.bind(o)("王五", 21);


十、传值和传址

传址:复杂的数据类型就会涉及到传址问题

传值:简单的数据类型,(一个简单的变量就是简单的数据)

//传值

var  a=10;

var   b=a;

var    b=5;

console.log(a)//10

//传址

var  arr1=[1,2,3,4];

var   arr2=arr1;

arr2[1]=5;

console.log(arr1);//[1,5,3,4]

//传址

var   obj1={

name:"coco",

age:18

};

var   obj2=obj1;

obj2.age=10;

console.log(obj1)//{name:"coco",age:10}

//传址造成的问题案例

function   Dad(height) {

this.name="王健林";

this.height=height;

this.money="$88888888888";

this.hobby=function() {

console.log("太极");

}

}

//js面向对象里面的继承,原型是不会被继承的

Dad.prototype.fun=function() {

console.log("高尔夫");

}

functionSon(height) {

this.name="王思聪";

//继承(就相当于把this指向的函数加到Dad里面)

//Dad.call(this, height);

//Dad.apply(this, [height]);

Dad.bind(this)(height);

}

//解决不能继承原型的问题

//这种方式,造成了两个fun的地址是在一起,改变一个,另一个也会被改变,传址

Son.prototype=Dad.prototype;

Son.prototype.fun=function() {

console.log("泡妞");

}

var   newDad= new    Dad();

newDad.fun();//泡妞


十一、深拷贝(克隆)

1.JSON.stringify()  将 [] 或 {} 的对象转换成字符串形式的值,就是编码

2.JSON.parse()  将字符串形式的 [] 或 {} 值转换成对象,就是解码

3.克隆实现原理:利用字符串赋值为传值的特点,先将对象转换成字符串形式,然后将字符串形式的值再转换成对象。

4.兼容问题:不支持低版本IE浏览器

//解决传址问题

//深拷贝,克隆

var   obj1={

name:"coco",

age:18

};

//编码json数据

//var _json = JSON.stringify(obj1);

//console.log(_json)

//console.log(typeof  _json) //string

//解码json串

//var obj2 = JSON.parse(_json);

//console.log(obj2);

//用深拷贝解决传址问题

var     obj2=JSON.parse(JSON.stringify(obj1));

obj2.age=13;

console.log(obj1);


十二、typeof的不足

typeof 可以准确地判断出简单数据类型,但对复杂数据类型的判断相对比较模糊。

比如: 数组对象 \ 时间对象 \ 正则对象 \ Math对象等都返回的是 ‘object’。

优化方案:封装函数
function type( obj ){

var o = {};

return o.toString.call(obj).slice(8,-1).toLowerCase();

}

实现原理:Object 对象的 prototype 的 toString() 方法会返回一个表示对象本身类型的字符串。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,615评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,007评论 1 10
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 535评论 0 2
  • 一、JavaScript基础知识回顾 1.1 JavaScript 1.1.1 javascript是什么? Ja...
    福尔摩鸡阅读 1,093评论 0 7
  • 面向对象的特性: 封装 继承 多态 封装作用:方便代码的维护,提高代码的复用性,更安全的访问数据的方式注意:js中...
    柠檬糖阅读 259评论 1 3