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对象

常用Javascript代码片段集锦

JavaScript单行代码,也就是代码片段

javascript 仿面向对象编程实例代码(私有,公共变量。。。)

JavaScript对象原型链继承闭包