JavaScript面向对象

JavaScript面向对象

面向对象的概念

  使用对象时,只关注对象提供的功能,不关注其内部细节。比如电脑——有鼠标、键盘,我们只需要知道怎么使用鼠标,敲打键盘即可,不必知道为何点击鼠标可以选中、敲打键盘是如何输入文字以及屏幕是如何显示文字的。总之我们没必要知道其具体工作细节,只需知道如何使用其提供的功能即可,这就是面向对象。

对象的概念

   对象由属性和方法组成的键值对封装而成,对象是JavaScript中最重要的元素。javascript具有11种内置对象:Array, String, Date, Math, Boolean, Number,Function, Global, Error, RegExp, Object。JavaScript程序大多数功能都是通过对象实现的。

自定义对象

创建自定义对象的方法:
 使用{}定义对象字面值,会造成大量重复代码;
 工厂模式:使用函数封装构造函数模式:使用new创建对象;
 原型模式:利用每个函数的prototype(原型)属性,所有实例共享定义的属性和方法,现在很少单独使用;
 组合使用构造函数模式和原型模式:最常用的方法;
 不常用:动态原型模式、寄生构造函数模式和稳妥构造函数模式。

json数据格式

 JSON:JavaScript Object Notation,JavaScript对象符号。
 用途:应用于数据存储和交互。
 语法:JavaScript中的"{ }"语法,JSON实际上就是JavaScript中的对象的字面量语法,以键值对的形式保存数据。
 JSON与对象的区别:对象中成员名不用引号进行包裹。JSON推荐使用双引号来包裹成员名和字符串型的值。
     var json=  {"name":"Tom","age":24 ,"work":true,"arr":[1,2  ]};
     var json=  [{"name":"Tom","age":24 },{"name":"Jim","age":25}];json[0].namejson['name']

自定义对象-工厂模式

 用函数封装以特定接口创建对象的细节。
 缺点:创建的对象都是Object实例,无法区分对象类型
function createStudent(name, age) {
varobj= new Object();
obj.name = name;
obj.age= age;
obj.sayHello= function() {console.log('你好, ', name);}
return obj  ;
}
varstu1 = createStudent('Jim', 19);
varstu2 = createStudent('Tom', 21);
console.log(typeofstu1);  // Object
console.log(typeofstu2);  // Object
stu1.sayHello();

自定义对象-原型模式

原型对象:每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
prototype是通过调用构造函数而创建的对象实例的原型。
使用原型对象的好处:可以让所有对象实例共享它所包含的属性和方法。
function Person() {};
Person.prototype.name = 'Yvette';
Person.prototype.age= 26;
Person.prototype.job= 'engineer';
Person.prototype.sayName= function() {console.log(this.name);}
varperson1 = new Person();
console.log(person1.name);
varperson2 = new Person();
console.log(person2.name);

this关键字

this可以用在构造函数中,它总是返回函数运行时所在的对象。
由于js支持运行环境的动态切换,所以函数中的this指向也会发生改变,也就是:this的指向是动态的。
分析this指向:在JavaScript中,函数内的this指向通常与以下3种情况有关。
new关键字将函数作为构造函数调用时,构造函数内部的this指向新创建的对象。
直接通过函数名调用函数时,this指向全局对象(浏览器中表示window对象)。
如果将函数作为对象的方法调用,this将会指向该对象。
更改this指向:函数的调用者还可以利用JavaScript提供的两种方式手动控制this的指向。apply()方法call()方法。
function method() {
console.log(this.name);
}
// 输出结果:张三
method.apply({name: '张三'}); 
// 输出结果:李四
method.call({name: '李四'});
function method(a, b) {
console.log(a + b);
}
// 数组方式传参,输出结果:12
method.apply({}, ['1', '2']); 
// 参数方式传参,输出结果:34
method.call({}, '3', '4');


更改this指向两种方法的区别:
相同点:apply()和call()方法的第1个参数表示将this指向哪个对象。
不同点:apply()方法的第2个参数表示调用函数时传入的参数,通过数组的形式传递;call()方法的第2~N个参数来表示调用函数时传入的函数。
func.apply(thisValue, [arg1, arg2, ...])
func.call(thisValue, arg1, arg2, ...)

原型与继承

在JavaScript中,每定义一个函数,就随之有一个对象存在,函数通过prototype属性指向该对象。这个对象称之为原型对象,简称原型。
利用原型对象实现继承,使子类继承父类的属性和方法。
function Person(name) {
 this.name = name;
 }
 Person.prototype.sayHello= function () {console.log('你好,我是' + this.name);}
 function Student(student_no) {this.student_no= student_no;}
 // 让子引用类型的原型指向对象指向父类型的实例
 Student.prototype= new Person('niit  ');
 var   student = new Student('1801630101');
 console.log(student.name);
 console.log(student.sayHello());

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值