JavaScript面向对象
Posted duan-yf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript面向对象相关的知识，希望对你有一定的参考价值。
1.javascript中的数据类型
number(数值类型)
string(字符串类型)
boolean(布尔类型)
null(空类型)
undefined(未定义类型)
object(对象类型)
2.对象是什么？
对象是包含相关属性和方法的集合体，它包括 属性和 方法
3.什么是面向对象？
面向对象仅仅是一个概念或者编程思想，通过一种叫做原型的方式来实现面向对象编程
4.创建对象包括自定义对象和内置对象
常见的内置对象：
String（字符串）对象：length属性 indexOf()方法 replace()方法
Date（日期）对象：get***：获取年、月、日、时、分、秒等等 set***：获取年、月、日、时、分、秒等等
Array（数组）对象：length属性 sort()、concat()、join()方法
boolean(逻辑) 对象：true或者false
Math(算数) 对象 : round()、max() 、min()
RegExp 对象 ： 正则表达式的缩写
自定义对象
基于Object对象的方式创建对象
语法：var 对象名称=new Object( )
示例：
var person=new Object();
person.name="小明";
person.sex="男";
person.age=18;
person.hobby="看书、看电影、健身、购物等";
person.showName=function(){
alert(this.name);
}
person.showName();
使用字面量赋值方式创建对象
var person={
name:"小明",
sex:"男",
age:18,
hobby:"看书、看电影、健身、购物等",
showName:function(){
alert(this.name);}
}
person.showName();
广义对象和狭义对象
1)狭义对象：只有属性和方法，除此之外没有任何其他内容。
var obj={}; //用{}声明的对象
var obj=new Object(); //用new声明的对象
2)广义对象：除了用字面量声明的基本数据类型之外，JS中万物皆对象。换句话说，只要能添加属性和方法的变量，都可以称为对象。
var s="123"; //不是对象
s.name="aaa";
console.log(typeof(s)); //String
console.log(s.name); //undfined 字面量声明的字符串不是对象，不能添加属性
var s=new String("123"); //是对象
s.name="aaa";
console.log(typeof(s)); //Object
console.log(s.name); //"aaa" 使用new声明的字符串是对象，能添加属性和方法。
5.如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？
构造函数、 原型对象
6.调用构造函数的4个步骤
1.创建一个新对象
2.将构造函数的作用域赋给新对象（this）
3.执行构造函数中的代码
4.返回新对象
7.constructor属性指向Person
alert(person1.constructor==Person);
alert(person2.constructor==Person);
alert(person3.constructor==Person);
8.使用instanceof操作符检测对象类型
alert(person1 instanceof Object);
alert(person1 instanceof Person);
alert(person2 instanceof Object);
alert(person2 instanceof Person);
alert(person3 instanceof Object);
alert(person3 instanceof Person);
9.原型对象：
function Person (){
}
Person.prototype.name="小明";
Person.prototype.sex="男";
Person.prototype.age=18;
Person.prototype.hobby="看书、看电影、健身、购物等";
Person.prototype.showName=function() {
alert(this.name);
}
var person1=new Person();
person1.showName();
var person2=new Person();
person2.showName();
alert(person1.showName==person2.showName);
10.原型链：一个原型对象一个原型对象拼接在一起
一个原型对象是另一个原型对象的实例 相关的原型对象层层递进，就构成了实例与原型的链条，就是原型链
1 function Humans(){ 2 this.foot=2; 3 } 4 Humans.prototype.getFoot=function(){ 5 return this.foot; 6 } 7 function Man(){ 8 this.head=1; 9 } 10 Man.prototype=new Humans(); //继承了 11 Humans Man.prototype.getHead=function(){ 12 return this.head; 13 } 14 var man1=new Man(); 15 alert(man1.getFoot()); //2 16 alert(man1 instanceof Object); //true 17 alert(man1 instanceof Humans); //true 18 alert(man1 instanceof Man); //true
12.调用man1.getFoot( ) 经历的三个步骤
1.搜索实例
2.搜索Man.prototype
3.搜索Humans.prototype
13.对象继承
function Humans(){
this.clothing=["trousers","dress","jacket"];
}
function Man(){
} //继承了
Humans Man.prototype=new Humans();
var man1=new Man();
man1.clothing.push("coat");
alert(man1.clothing);
var man2=new Man();
alert(man2.clothing);
14.借用函数
apply：应用某一对象的一个方法，用另一个对象替换当前对象
语法：apply([thisObj [,argArray]])
call：调用一个对象的一个方法，以另一个对象替换当前对象
语法：call([thisObj[,arg1[,arg2[, [,argN]]]]])
function Humans(name){
this.name=name;
} function Man(){
Humans.call(this,"mary"); //继承了Humans,同时还传递了参数
this.age=38; //实例属性
}
var man1=new Man();
alert(man1.name); //输出mary
alert(man1.age); //输出38
15.组合继承
也叫做伪经典继承 将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建继承Person的Student子类</title> </head> <body> <script type="text/javascript"> function Person() { //创建构造函数Person,添加属性 this.name = "张三"; this.chinese = "98"; this.math = "80"; this.showName = function () { return this.name; } this.showChinese = function () { return this.chinese; } this.showMath = function () { return this.math; } } function Student() { } Student.prototype = new Person(); Student.prototype.age = "25"; Student.prototype.showAge = function () { return this.age; } var student = new Student(); document.write("姓名:" + student.showName() + "<br><br>语文:" + student.showChinese() + "<br><br>数学:" + student.showMath() + "<br><br>年龄:" + student.showAge()); //方法2: /* student.End = function () { //回顾下前面学的 麻烦,上个简单好用. var str = "姓名:" + student.showName() + "<br>语文:" + student.showChinese() + "<br>数学:" + "<br>年龄:" + student.showAge(); document.getElementById("one").innerHTML = str; } student.End();*/ </script> </body> </html>
以上是关于JavaScript面向对象的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象
VSCode自定义代码片段12——JavaScript的Promise对象