js 面向对象原型和原型链

数据类型分类和判断

分类

基本（值）类型
- String ：任意字符串
- Number : 任意数字
- boolean : true/false
- undifined : undifined
- null : null

对象（引用）类型

Object : 任意对象

    var obj = {
        name : '张三',
        age : 20
    };

Function : (一种特殊的对象) 函数

var fn = function(){
    console.log("hello world!");
}
fn();

Array : (一种特殊的对象) 数组

var arr = [1,2,3]

判断

typeof
- 可以判断： undifined / 数值 / 字符串 / 布尔值 / function
- 不可以判断 null与object array和object null和array都会返回object

//1.基本
//typeof 返回数据类型的字符串表达
var a ;
console.log(a , type a , type a==='undifined' , a === undifined);
console.log(undefined===='undefined');
a = 4 ;
console.log(typeof a==='number');
a = '张三';
console.log(typeof a==='string');
a = null;
console.log(typeof a===null); //false null的typeof 是 'object'

instanceof (instance - 实例)
- 判断对象的具体类型

var obj = {
    name : "张三",
    age : 20
};
var fn1 = function(){
    console.log("hello world !");
};
var arr = [1,2,3];
console.log(obj instanceof Object , obj instanceof Array); // true , false
console.log(arr instanceof Array , arr instanceof Object); // true , true
console.log(fn instanceof Function , fn instanceof Object); //true true 因为函数也是一种特殊的对象

console.log(typeof fn ==='function'); //true

===
- 可以判断undifined 和 null

注意的问题

undefined 与 null 的区别
- undifined代表定义未赋值
- null是给变量赋值给null
什么时候给变量赋值为null
- 初始赋值为null , 表明将要赋值为对象
- 结束前赋值为null,让对象成为垃圾对象（被垃圾回收机器回收）

数据 - 变量 - 内存

什么是数据
- 存储在内存中代表特定信息，本质上是二进制代码
- 一小块内存的两个数据
  - 内部存储的数据
  - 地址值
- 内存分类
  - 栈：全局变量/局部变量
  - 堆：对象
```
    var obj = { name : 'tome'} // obj在栈空间中（变量名和对象存在堆空间中的地址） ， {}中的内容在堆空间中
```
- 数据的特定：可传递；可运算；
什么是内存
- 用于存储数据的空间
什么是变量
- 可变化的量，由变量名和变量值组成
- 每个变量都对应的一块内存，变量名来查找到对应的内存，变量值是内存中保持的数据
内存，数据，变量三者直接的关系
- 内存是用来存储数据的空间（临时）
- 变量是内存的标识

注意的问题

js引擎如果管理内存
- 内存生命周期
  - 分配小内存空间，获取使用权
  - 存储数据，可以反复进行操作
  - 释放小块内存
- 释放内存
  - 局部变量:函数执行完自动释放
  - 对象：成为垃圾对象（没有变量指向）==>垃圾回收器回收
```
    function fn(){
        var obj = {};
    }
    fun(); //b是自动释放，b所指向的对象在后面的某个时刻被垃圾回收器回收
```

对象

什么是对象
- 多个数据的封装体
- 用来保存多个数据的容器
- 一个对象代表显示事件中的一个事物
为什么要用对象
- 统一管理多个数据
对象的组成
- 属性：属性名（字符串）和属性值（任意类型）组成
- 方法：一种特别的属性（属性值是函数）
如何访问对象内部数据
- .属性名
- ['属性名'] 当属性名包含特殊字符：- 空格只能用这种方式获取

函数

什么是函数
- 实现特定的功能的n条语句的封装体
- 只有函数是可以执行的，其他类型的数据不能执行
为什么要用函数
- 提高代码的复用
- 便于阅读
如何定义函数
- 函数声明 function fn1(){}
- 表达式 var fn2 = function(){} //区别是会变量提升
如何调用函数
- test() 直接调用
- obj.test() 通过对象调用
- new test() new调用
- test.call/applay(obj) : obj.test() //临时让test的方法变成obj的方法调用

    var obj = {
        name : 'jack'
    };
    function setName(){
        this.name = 'tom';
    }
    //obj.setName() 
    setName.call(obj); //可以让一个函数成为知道任意对象的方法被调用
    console.log(obj.name);

回调函数

什么是回调函数
- 自定义的
- 没有调用却执行了
常见的回调函数
- dom事件的回调函数
- 定时器回调函数
- ajax请求回调函数
- 生命周期回调函数

IIFE

Immediately-Invoked Function Expression
- 立即调用函数表定式
作用
- 隐藏实现
- 不会污染外部（全局）命名空间
- 用它来编写js模块

    (function(){ //匿名函数
        var a =3 ;
        console.log(a+3);
    })();

    var a = 1;
    console.log(a)
    (function(){ //匿名函数
        function test(){
            consol.log(++a);
        }
        function test2(){
            console.log('test2');
        }
        window.$ = function(){ //向外暴露一个全局函数
            return {
                test : test 
            }
        }
    })();
    //1.$是一个函数 2.$执行后返回的是一个的对象
    $().test;

函数的prototype

函数的prototype属性
- 每个函数都有一个prototype属性，它都默认指向一个Object空对象（即称为：原型对象）
- 原型对象中有一个属性constructor,它指向函数对象
给原型对象添加属性（一般都是方法）
- 作用：函数的所有实例对象自动拥有原型中的属性（方法）

function fun(){
    
}
fun.prototype.test = function(){
    console.log('----test----');
}
console.log(fun.prototype); //默认指向一个Object空对象
console.log(fun.prototype === fun); //true

//给原型对象添加属性（一般是方法） ===>实例的对象可以访问
var f = new fun();
f.test();

显示原型与隐式原型

每个函数都有一个prototype属性，即显示原型（属性）
每个实例对象都有一个__proto__，可称为隐式原型

对象的隐式原型的值是对应构造函数的显性对象的值

//定义构造函数
function fun(){ //内部语句：this.prototype = {}

}
//创建实例对象
var f = new fun() // 内部语句： __proto__ = fun.prototype
//给原型添加方法
fun.prototype.test = function(){
    console.log("--test--");
};
//通过实例调用方法
f.test();

内存结构

原型链

原型链
- 访问一个对象的属性时
  - 先在自身属性中查找，找到返回
  - 如果没有，再沿着__proto__这条链向上查找
  - 如果最终没有找到，返回undifined
- 别名：隐式原型链
- 作用：查找对象的属性方法
- 原型上的属性和方法是提供给原型链上的实例使用的，原型的继承也是通过原型链
图解

console.log(Object);
console.log(Object.prototype);
console.log(Object.prototype.__proto__); //null
function Fn(){
	this.test1 = function(){
		console.log('test1');
	}
}
var fn = new Fn();
Fn.prototype.test2 = function(){
	console.log('--test2--');
}
fn.test1();
fn.test2();
console.log(fn.test3) //undifined
fn.test3(); //报错 fn.test3不是一个方法

注意

函数的显示原型指向对象的空Object实例对象（但Object不满足）

function Fn (){
    
}
console.log(Fn.prototype instanceof Object); //true
cosole.log(Object.proptotype instanceof Object); // false
cosole.log(Fuction.proptype instanceof Object);//true

所有函数都是Function的实例（包含Function本身）

instanceof

instanceof 是如何判断的？
- 表达式：A instanceof B
- 如果B函数的显示原型对象在A对象的原型链上，返回true

posted @ 2022-03-27 20:50 tli迪蝎阅读(44) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

tli迪蝎

js 面向对象 原型和原型链

数据类型分类和判断

分类

判断

注意的问题

数据 - 变量 - 内存

注意的问题

对象

函数

回调函数

IIFE

函数的prototype

显示原型与隐式原型

原型链

注意

instanceof

公告

js 面向对象原型和原型链