本文主要是介绍前端学习之路3-JavaScript面向对象,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 原型
- 继承
- class
- 封装
js中的对象,最简单的是字面量对象
var obj={name:'tom',getName:function(){return this.name}
}
对象属性可以为基本类型,对象和函数。同时支持动态添加修改属性。
原型
每个对象都含有原型的引用,当查找属性时,若对象本身不具有该属性,则会查找原型上是否有该属性。
在JavaScript中,对象的原型属性是内置属性(使用标记[[prototype]]),无法直接访问。相反,内置的方法Object.setPrototypeOf需要传入两个对象作为参数,并将第二个对象设置为第一个对象的原型。
但是要注意的是如果在实例中定义了一个和原型中同名的方法,实例会隐藏原型的方法。
继承
原型复制:
function Person(){}
Person.prototype.dance=function(){}function Ninja(){}
Ninja.prototype={dance: Person.prototype.dance}
原型继承:
function Person(){}
Person.prototype.dance=function(){}function Ninja(){}
Ninja.prototype= new Person()
class
注意class是es6中的语法糖,底层仍是原型的实现
class Ninja{constructor(name){this.name=name}swingSword(){return true;}
}var ninja=new Ninja("hh")
封装
getter,setter
const ninjaCollection={ninjas:["a","b"],get firstNinja(){return this.ninjas[0];},set firstNinja(value){this.ninjas[0]=value;}
}
也可以通过内置的Object.defineProperty定义
Object.defineProperty(obj, prop, desc)Object.defineProperty(obj, 'key', {enumerable: false,configurable: false,writable: false,value: 'static'
});Object.defineProperty(o, 'a', {value: 37,writable: true,enumerable: true,configurable: true
});Object.defineProperty(o, 'b', {// Using shorthand method names (ES2015 feature).// This is equivalent to:// get: function() { return bValue; },// set: function(newValue) { bValue = newValue; },get() { return bValue; },set(newValue) { bValue = newValue; },enumerable: true,configurable: true
});
o.b; // 38
这篇关于前端学习之路3-JavaScript面向对象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!