JavaScript面向对象及相关知识
最近在学习JavaScript面向对象,写下自己的理解及相关资料,以备查阅。
一.面向对象中涉及的相关几个概念
1.作用域
所谓作用域,就是说属性和函数的可访问范围。在JavaScript中,作用域分为两种。全局作用域和局部作用域。
所有没有var 声明 或 定义于最外层函数和最外层函数外面即为全局作用域。也就是定义可以随意调用。
自定义函数内部用var声明的为局部作用域。
var num = 1; //全局作用域 window.onload = function() { //最外层为全局作用域 var age = 18; function turn() { //局部作用域,内部用var声明的只能被turn读取 sex = "男"; //未用var声明,为全局变量(可能只想用作局部,这样会出现bug,不推荐) var name = "刘某"; //局部变量 function test() { var data = "好"; var name = "王某"; console.log(name) //王某 }; console.log(name) //刘某 } }
需注意的是 读取属性(变量)时是先在最近的作用域中查找,没有就往上查找。最后查找全局,未定义则报错 undefined。
2.闭包
在JavaScript中,一个函数自带有作用域。一函数嵌套在另一函数内,内部函数可以访问到外部函数的属性,但外部函数和其他函数访问不到内部函数,为了解决这问题。闭包应运而生。
闭包的定义就是函数内部与其他函数连接的桥梁(常用return指向)。
function test(){ var n = 2; //定义为局部变量 外部函数不能访问 function f2(){ console.log(n); } return f2; //用return 返回 } var result=test(); result(); // 2 外部可以得到值
3. this指向
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var name = "二货"; //全局 指向window function fooCoder(x) { this.x = x; } fooCoder(2); //函数调用,this指向window var person = { name : "foocoder", hello : function(sth){ console.log(this.name + " says " + sth); } }; person.hello("hello world"); //对象调用时,this指向对象本身(Person) function Foo(name,color) { this.name=name; this.color=color; } var cc=new Foo("liuxing","yellow"); //调用构造函数时,this指向生成的实例(cc) var persone = { name : "foocoder", hello : function(sth){ var that = this; var sayhello = function(sth) { console.log(that.name + " says " + sth); //函数内部this指向window(一说为JavaScript设计有误) }; sayhello(sth); } } person.hello("hello world"); //foocoder says hello world
总结如下(这是博客园某博主总结的,一时找不到该博客,感谢。)
1.当函数作为对象的方法调用时,this指向该对象。
2.当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。
二.javascript OOP
在javascript没有类的概念。实现继承功能的方法一般是利用原型(prototype)。今天先更到这。等理解稍透彻再来重写。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 声明 Animal 对象构造器 function Animal() {} // 将 Animal 的 prototype 属性指向一个对象, // 亦可直接理解为指定 Animal 对象的原型 Animal.prototype = { name: "animal", weight: 0, eat: function() { alert( "Animal is eating!" ); } } // 声明 Mammal 对象构造器 function Mammal() { this.name = "mammal"; } // 指定 Mammal 对象的原型为一个 Animal 对象。 // 实际上此处便是在创建 Mammal 对象和 Animal 对象之间的原型链 Mammal.prototype = new Animal(); // 声明 Horse 对象构造器 function Horse( height, weight ) { this.name = "horse"; this.height = height; this.weight = weight; } // 将 Horse 对象的原型指定为一个 Mamal 对象,继续构建 Horse 与 Mammal 之间的原型链 Horse.prototype = new Mammal(); // 重新指定 eat 方法 , 此方法将覆盖从 Animal 原型继承过来的 eat 方法 Horse.prototype.eat = function() { alert( "Horse is eating grass!" ); } // 验证并理解原型链 var horse = new Horse( 100, 300 ); console.log( horse.__proto__ ); console.log( Horse.prototype.__proto__ === Mammal.prototype ); console.log( Mammal.prototype.__proto__ === Animal.prototype ); //对象的_proto_来实现对原型的隐式引用 function Person(age){ this.age=age; } var b=new Person("sss"); //验证构造出来的函数_proto_属性是否指向构造器的prototype console.log(b.__proto__ === Person.prototype); //原型本身是一个Object对象,所以他的隐式引用指向了Object构造器的prototype属性 console.log(Person.prototype.__proto__ === Object.prototype); //构造器Person本身是一个函数对象 console.log(Person.__proto__ === Function.prototype) //原型链 function Nperson(){} Nperson.prototype={ name:"刘星星", age:"89", num: function () { console.log(1) } } //调用原型的属性为函数时 加上() Nperson.prototype.num(); function Mperson(){} //将新构造器的原型指向已有的构造器 它原型是指向的函数 它隐式调用{原型的原型}为指向函数{对象}的几个属性 name age //创建了Mperson和Nperson的原型链 Mperson.prototype = new Nperson(); console.log(Mperson.prototype.__proto__); Mperson.prototype.num(); //使用Horse对象构造器 function Horse(height,width){ this.name = "liuxingxing"; this.height = height; this.width = width; } //将多个函数{函数的属性}链接起来 实现原型链{属性在几个函数里都可取到} Horse.prototype = new Mperson(); console.log(Horse.prototype.num); //修改原属性 不会替换之前的属性 Horse.prototype.num="asdasd"; console.log(Horse.prototype.num); //验证下原型链 var acc=new Horse(200,500); console.log(Horse.prototype.age); //acc.__proto__ 等同于 Horse.prototype console.log(acc.__proto__ === Horse.prototype); console.log(Horse.prototype.__proto__ === Mperson.prototype); console.log(Mperson.prototype.__proto__ === Nperson.prototype); document.write(Mperson.prototype.__proto__.name); // 闭包 实现信息隐藏 function User(pwd) { //定义私有属性 var password = pwd; function getPassword() { // 返回了闭包中的 password return password; } //特权函数声明,用于该对象其他公有方法能通关特定方向访问到私有成员 this.passwordSer = function () { return getPassword() } } //公有成员声明 User.prototype.accd= function (pwd) { return this.passwordSer() === pwd; } //验证隐藏性 var u = new User("liuxingxing"); //公有的可以访问到 console.log(u.accd("liuxingxing")); //私有的属性不能访问到 console.log(u.password)