JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型
面向对象的三大特性:
- 封装
a) 把一些属性和方法装到一个对象里
2. 继承
a) js中的继承是指:
- 一个对象没有一些方法和属性,而另一个对象有
- 把另一个个对象的属性和方法,拿过来自己用,这就是继承
b) 混入式继承 for … in
1. 父类的属性和方法在所有之类
3. 多态
a) JS中没有相应的体现
b) 在强类型语言比较常见
c) 实用父类的变量接受子类的对象
d) 父类的属性方法供所有的子类共享
创建对象的方式
1. 创建对象
四种方法:
1、字面量创建
用一个创建一个,不能复用。会造成代码亢余,资源浪费
2、内置构造函数创建对象
1、内置构造函数创建对象
1. var p = new Object();
2.var arr = new Array();
3. 创建出来的对象都是空对象,要手动添加属性,造成代码重复
3、 封装简单的工厂函数(不推荐)

function creatObj(name, age){
var obj = {
boj : name;
obj: age;
sayHello : function(){
console.log('');
}
}
return obj;
}

4、 自定义构造函数
function Porple(data1,data2){
this.xx = data;
}
构造函数是干什么用的?
在JavaScript中,构造函数是给对象添加属性,初始化属性用的。
对象的创建过程
var p = new Person();
以上面这个p对象创建为例:
首先使用new关键字创建对象,类似于使用
{},这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点:- 使用
new关键字创建的对象,对象的类型就是创建这个对象使用的构造函数的函数名 - 使用
{}创建对象,对象的类型一定是Object,相当于使用了new Object()
- 使用
使用构造函数为其初始化成员
- 在构造函数调用开始的时候,有一个赋值操作,也就是让
this = 刚创建出来的对象 - 在构造函数中,
this就代表刚创建出来的对象
- 在构造函数调用开始的时候,有一个赋值操作,也就是让
在构造函数中,利用对象的动态特性,为对象添加成员
自定义构造函数
function Porple(data1,data2){
this.xx = data;
}
- 概念:用来实例化对象,并且给初始化对象赋值
- 构造函数名首字母大写
- 构造函数一般和new关键字一起使用
- 构造函数返回值默认为新创建好的对象,如果手动设置返回值
a) 返回值类型如果不是Object类型的都还返回创建的对象
b) 如果是Object类型的就返回object
a) 对象字面量{},创建对象
b) 自定义构造函数,创建对象
- 构造函数也是函数,通常用来初始化对象
- new用来创建对象
- 构造函数用来初始化函数
- 构造函数名要大写,
c) 构造函数的执行过程
- 使用new关键字创建对象
- 调用构造函数把新创建出来的对象赋值给构造函数的this关键字
- 在构造函数内实用this为新创建出来的对象添加成员
- 默认返回新创建的这个对象
- 如果return一个空值,或者return一个基本类型数据仍旧是返回新创建的对象
a) 返回undefined和null都是返回新对象
- 如果return的是object类型,将返回return后面的对象
- 函数名加括号就是调用函数
- 不写括号是把函数整体代码赋值给另一个变量
- 如果调用函数的时候不给构造函数实参,构造函数不会创建新对象,里面的this将会指向window,添加的属性也会添加给window
- 如果构造函数没有参数,可以不写括号调用
对象成员:属性和方法
原型、
- 每一个函数在定义的时候,都会有跟它关联的一个对象被创建出来
- 每一个由构造函数创建出来的对象,都会默认的和构造函数的神秘对象关联
- 当使用一个方法进行属性或者方法访问的时候,会先在当前对象内查找该属性和方法
- 如果当前对象内未找到,就回去跟它关联的神秘对象内进行查找
- 访问构造函数的原型
a) 构造函数.prototype
2. 构造函数.prototype.新属性 = 属性值
3. 自己和原型中都有的属性,优先用自己的
3. 创建一个对象叫做实例化对象
a) 通过构造函数创建对象创建对象的过程
4. 实例
a) 通过构造函数实例化出来的对象就是该构造函数的一个实例
5. 原型的实用方法:
a) 利用对象的动态特性给原型对象添加属性
6. 直接替换原型对象
Porple.prototype = {
name : ‘Jack’,
}
a) 直接替换原型对象出现的问题
- 在替换原型之前创建的对象的原型 和在替换原型之后创建的对象的原型 不是同一个
- 替换不是修改
b) 点语法进行属性赋值的时候,不会去原型查找
c) 使用点语法赋值的时候,如果对象中不存在该属性,就会对该对象新增属性,不会去原型中查找
d) 如果原型总分的属性是引用类型的属性,那么所有的对象共享该属性,并且一个对象修改了该引用
类型中的成员,所有对象都会被修改
e) 一般不会把属性放置到原型中
7. 通过构造函数访问原型
a) 构造函数.prototype
8. 通过对象访问原型
a) 对象.__proto__ //不推荐使用
9. constructor:原型对象的属性
JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型的更多相关文章
- JS高级---工厂模式创建对象和自定义构造函数创建对象的区别
创建对象:工厂模式和自定义构造函数的区别 共同点: 都是函数, 都可以创建对象, 都可以传入参数 区别: 工厂模式: 函数名是小写 有new, 有返回值 new之后的对象是当前的对象 直接调用 ...
- JS高级---三种创建对象的方式
JS高级---三种创建对象的方式 字面量的方式 (实例对象) 调用系统的构造函数 自定义构造函数方式 //创建对象---->实例化一个对象,的同时对属性进行初始化 var per=new Per ...
- JS高级:面向对象的构造函数
1 创建对象的方式 1.1 字面量的方式创建对象 var p1 = { name: '张三', run: function () { console.log(this.name + '跑'); } } ...
- JS高级:面向对象解析
1 实例属性/方法 都是绑定在使用构造函数创建出来的对象p上; 最终使用的时候也是使用对象p来进行访问; function Person(name, age, doFunc) { this.name ...
- JS高级---体会面向对象和面向过程的编程思想
体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数,再通过原型添加方法的函数. 实例化对象,导入json参数,和创建cs,调用原型添加的方法函数 过渡,先熟悉记忆 <!D ...
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
- 前端 ---JS中的面向对象
JS中的面向对象 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...
- JS高级---复习
复习 面向过程和面向对象都是编程的思想, 方式不一样 面向过程: 凡事都是亲力亲为, 所有的代码都要自己写, 每一步都要很清楚, 注重的是过程 面向对象: 执行者成为指挥者, 只要找对象, 然后让对象 ...
- js面向对象、创建对象的工厂模式、构造函数模式、原型链模式
JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...
随机推荐
- 002Angular2工程目录解构
|--my-app 工程名 |--e2e 端到端测试 |--node_modules package.json列出的第三方模块放在此处 |--src |--app |--app.component.c ...
- 17_重入锁ReentrantLock
[概述] 重入锁可以完全代替synchronized关键字. 与synchronized相比,重入锁ReentrantLock有着显示的操作过程,即开发人员必须手动指定何时加锁,何时释放锁,所以重入锁 ...
- linux C之判断文件或目录是否存在 access函数
http://blog.sina.com.cn/s/blog_6a1837e90100uh5d.html access():判断是否具有存取文件的权限 相关函数 stat,open,chmod, ...
- 【MATLAB】十进制字节矩阵与比特流矩阵的互相转化
for i=1:length(enc_out_data) data_bits_temp=dec2bin(enc_out_data(i),8); databits((i-1)*8+1:i*8)=doub ...
- 三大集合框架之Set
Set介绍 Set相对于List.Map是最简单的一种集合.集合中的对象不按特定的方式排序,并且没有重复对象. 特点: 它不允许出现重复元素: 不保证和政集合中元素的顺序 允许包含值为null的元素, ...
- Siebel界面的搭建
Siebel界面的初步搭建都是基于Siebel Tools工具来创建的,其搭建步骤: 1. 首先先创建一个Project项目,点击project--->点 new Record--->输入 ...
- 解决未安装unit测试和jest的Vue项目运行karma start时的错误
一.起因 在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试.但是此项目在利用 vue-cli ...
- Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅
Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...
- Jmeter入门13 jmeter发送application/octet-stream二进制流数据
http接口请求header里面 content-type: application/octet-stream (二进制流数据),如何用jmeter发送请求? 1 添加http请求头 2 http请 ...
- 初次接触《C++程序设计原理与实践》一书
前两天读书日,买了些书回来看.__Bjarne Stroustrup__的<C++程序设计原理与实践>便是其中一本.其实也没看完,只看了第0章-致读者,大师不愧是大师,只看了一章就让心生共 ...