前端初学者应该如何理解面向对象?

对于面向对象很多初学者刚开始学习的时候会有很多疑惑而导致混淆,我总结了一些关于自定义函数,实例,原型对象的知识点。

一、自定义构造函数(可见)

1、构造函数和自定义构造函数的区别:

构造函数是通过调用内置构造函数创建对象的,而自定义构造函数是通过调用自己创建的函数创建对象的,调用方式不同。

2、构造自定义函数的执行步骤:

创建一个Object对象

将构造函数的this指向这个对象

执行构造函数中的代码

返回Object对象

3、约定:首字母大写

4、属性:prototype

5、关于this

函数是否用通过new调用

是:实例

否:(函数是否通过点语法调用)

是:指向(.)之前的对象

否:指向window


二、实例(可见)

1. 隐藏属性[[prototype]]该属性无法查看,但该属性指向原型对象

2. 实例.__proto__ 注意proto前后是两个杠 "_",输出控制台可以查看


三、原型对象(隐藏)

属性:

constructor 该属性的值是个对象,该对象就是自定义构造函数

相关的对象访问规则(为什么原型对象中的所有属性/方法能被所有的实例共享的原因)

当前对象->原型对象->Object的原型对象(Object.prototype),如果没有找到则就会得到undefined

综合案例:

实际开发中常用构造函数设置属性,原型对象设置方法这种组合当遇到,方法需要特殊处理时,可以把重名方法写到实例中去


例子:

function Person(name,age){

//构造函数添加属性

this.name = names;

this.age = 22;
}//原型对象添加方法

Person.prototype.say = function(){

console.log('超能说');
}

//实例

var p1 = new Person();

//特殊方法实例添加重名方法,它会先读取实例中的方法

p1.say = function(){

console.log('贼能说');
}

//此时调用p1的say方法只会输出贼能说,不会输出超能说


来源:千锋HTML5

阅读更多
文章标签: 前端初学者
上一篇谈谈我对JavaScript闭包的理解
下一篇快速理解JavaScript中的call、apply、bind的方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭